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Introducción al lenguaje HTML5 

Historia e introducción al lenguaje de programación web HTML5 

Por el año 1989, un físico nuclear Tim Berners-Lee del CERN (Centro europeo para 
la investigación nuclear) da la noticia de que está trabajando en un sistema que permite 
acceder a archivos en línea sobre el protocolo de comunicaciones TCP/IP. En este año 
existían dos métodos para enlazar documentos electrónicos entre sí. 

Por una parte los enlaces o hipervínculos y por otra parte un lenguaje denominado 
SGML (Standard Generalize Markup Language (Lenguaje de marcación generalizado): 
Consiste en un sistema para la organización y etiquetado de documentos. 

La ISO normalizo el lenguaje en el año 1986. Sirve para especificar las reglas de 
etiquetado y no impone ningún conjunto de etiquetas especial.), teniendo en cuenta estos 
métodos Tim Berners-Lee a principios de 1990 define el lenguaje HTML (Hypertext 
Markup Language “Lenguaje de marcas hipertextuales”) como un subconjunto de SGML y 
crea algo más el World Wide Web (También conocido como la Web, es un sistema de 
documentos de hipertexto y/o hipermedias enlazados entre si y accesibles desde 
Internet.). En 1991 crea el primer navegador de HTML que funcionaría en modo texto y 
para el sistema UNIX. 

El sucesor de HTML es HTML+, comenzando su desarrollo en 1993. Y siendo su 
diseñador David Ragget, que formalizo un conjunto de extensiones de HTML previas a la 
especificación formal de HTML y como una recopilación, replanteamiento, unificación y 
mejora de los diferentes dialectos de HTML usados por la primera implementación del 
mismo. Este sucesor aporta características nuevas al lenguaje tales como la utilización de 
imágenes, tablas, formularios y listas anidadas. 

El primer borrador oficial fue el HTML 3.0 y ya fue propuesto por el recién formado 
W3C (World Wide Web Consortium. Es un consorcio internacional que produce estándares 
para la WWW. Está dirigido por Tim Berners-Lee.) En 1993. Y en él se introducen nuevas 
características como la facilidad de la creación de tablas, la fluidez del texto alrededor de las 
figuras mostradas y la posibilidad de mostrar elementos matemáticos complejos. Aunque 
compatible con HTML 2.0, era demasiado complejo para ser implementado por la 
tecnología del momento y cuando expiro el borrador en septiembre de 1993 se abandonó, 
ya que no recibió el apoyo de los programadores de navegadores web. 

La siguiente especificación. El HTML 3.1 nunca llego a ser propuesto oficialmente, y 
su lugar fue ocupada por la siguiente especificación HTML 3.2, que desecho varias de las 
nuevas características utilizadas en la especificación 3.0 para adoptar muchos de los 
desarrollo realizados por los navegadores web NetScape y Mosaic. 
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La opción de trabajar con fórmulas matemáticas fue desechada y paso a integrar un 
estándar distinto denominado MathML. 



La especificación HTML 4.0 fue presentada en junio de 1998 y también adoptó 
muchos de los elementos específicos desarrollados inicialmente para un “navegador web” 
concreto, pero al mismo tiempo comenzó a limpiar el lenguaje HTML señalando varios de 
sus elementos como “desaprobados”. 

Hasta hace relativamente poco tiempo se utilizaba y utiliza la versión 4.01, la cual ha 
sido reemplazada por la nueva versión denominada HTML 5. 

HTML 5 desarrollada a partir del año 2007 por el grupo The Web Standards 
Project (Proyecto de estándares Web), el nuevo estándar era muy ambicioso ya que 
pretendía crear un nuevo lenguaje HTML capaz de ejecutar aplicaciones completas, de 
hecho existían muchas entidades importantes que eran escépticas ante el desarrollo del 
lenguaje y su salida a la luz. 

Pero ocurrió un hecho importante y es que los navegadores empezaron a incorporar la 
utilización de las etiquetas de HTML 5, esto unido a que el consorcio W3C decidió 
abandonar la especificación de XHTML 2.0 e indicó que se centraría en el desarrollo de 
HTML 3, dieron el empujón definitivo al nuevo estándar. Actualmente casi todos los 
navegadores soportan la mayoría de etiquetas HTML 5, y se ha de tener en cuenta que va a 
ser el nuevo estándar para la creación de sitios web. 


Lenguaje de etiquetas 


Uno de los primeros problemas que se plantearon en informática era como 
traspasar o enviar información entre equipos. Para solventar esta situación se decidió 
codificar la información para su envió, ya que la mayoría de información que se manejaba 
era texto. 

La codificación se aplica a un conjunto de caracteres de forma que cada carácter del 
conjunto tenga una asociación numérica. 

A estos conjuntos de caracteres se les denomina tablas, una de las tablas o 
conjuntos más conocidos y utilizados es el código ASCII, que relaciona cada carácter del 
conjunto con una combinación numérica en código binario, este código contempla 
caracteres alfabéticos, numéricos, de puntuación, etc. 

Una vez solucionado el paso de información se planteó la posibilidad de enviar 
junto a la información el formato correspondiente a la misma, como atributos del texto, 
color, tamaño, alineación, etc. 

Una de las soluciones propuestas fue la de crear una serie de marcas que insertadas 
en la información a enviar establecieran dicho formato. A estas marcas se les 
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llama Etiquetas y al conjunto de las mismas que determinan el formato se le conoce como 
un lenguaje de marcado o lenguaje de marcas. 

El siguiente ejemplo pretende mostrar una demostración de un lenguaje de 
marcado o lenguaje de marcas. Suponga que se desea enviar la siguiente información, 
destacando algunas de sus palabras: 

Hola Mundo ¡Buenos días! 

Su codificación utilizando etiquetas podría ser la siguiente: 

<texto>Hola <negrita>Mundo</negrita>¡Buenos días!</texto> 

Como se puede observar al incluir las etiquetas se puede establecer con bastante 
claridad que es lo que se desea resaltar. 

Tanto HTML como XHTML son lenguajes de marcado o marcas como su nombre 
indica: HTML significa Hypertext Markup Language (Lenguaje de marcas e hipertexto), 
mientras que XHTML significa Extended HyperText Markup Language (Lenguaje de marcas 
e hipertexto extendido) y como es obvio la nueva versión del lenguaje HTML 5, también es 
un lenguaje que utiliza etiquetas. 

Lógicamente cada uno de los lenguajes de marcado tienen sus propias etiquetas, 
aparte de estos dos lenguajes citados anteriormente, existen muchos otros lenguajes como 
XML, MathML, DocBook, etc. 

Normalmente los lenguajes de etiquetas suelen tener etiquetas de inicio y cierre 
para los diferentes formatos que se quieren aplicar. De esta forma se indica cuando tiene 
que empezar y finalizar el formato. 

En el caso de HTML y XHTML el formato de sus etiquetas para expresar el principio 
y final de un formato es el siguiente: 

Etiqueta de apertura o inicio del formato: 

<Etiqueta> 

La etiqueta anterior está compuesta por el símbolo “ < ” seguidamente y sin 
espacios en blanco el nombre de la etiqueta y a continuación el símbolo “>“. 

Etiqueta de cierre o final del formato: 

</Etiqueta> 

La etiqueta de cierre está compuesta por el símbolo “<” seguidamente y sin 
espacios en blanco, el símbolo “/“, el nombre de la etiqueta y por último el símbolo 
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A continuación tiene una serie de ejemplos que se podrían aplicar en un 
documento html para especificar párrafos: 

<p>Esta etiqueta es para indicar que este texto es un párrafo</p> 

<p>un párrafo con una <strong>palabra</strong> resaltada</p> 
<p>visítanos en <em>www.aprendoencasa.com</em> gracias</p> 

Estructura y definición de documento HTML 


Al utilizar un lenguaje estructurado, como es HTML 3, se ha de tener una estructura 
básica para la creación de la página web, al igual que otros lenguajes estructurados se ha de 
cumplir con un etiquetado inicial que determina como está compuesta la página. 

Estructura básica de una página en HTML5 

Si se observa el código fuente de una página Web básica, se pueden distinguir tres 
partes bien diferenciadas, un ejemplo de una página básica en HTML 5 sería el siguiente: 


<!DOCTYPE html> 

<html> 

<head> 

<title>Primer Ejercicio HTML 5</title> 

</head> 

<body> 

<p>Esperamos que <strong> aprendoencasa.com</strong> sea un lugar donde estéis 
cómodos</p> 

</body> 

</html> 

Como se puede observar en primer lugar se encuentra la definición del tipo de 
documento, el cual se especifica con la etiqueta < 1D0CTYPE , seguidamente se encuentra 
la etiqueta <html> que especifica el principio y fin del documento HTML, entre las 
etiquetas de principio y fin del documento se ubican las etiquetas correspondientes al 
encabezado y cuerpo del documento cuyas etiquetas correspondientes 
son <head> y <body> . A continuación se explica con detalle cada uno de estos 
apartados. 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 










14 www.aprendoencasa.com 


HTML! 


Curso de introducción al diseño Web 


Básicamente se puede decir que un documento web realizado con el lenguaje de 
marcas o etiquetas HTML5, tiene dos secciones principales, el encabezado y el cuerpo del 
documento. 


Definición del tipo de documento 


La primera línea de un documento HTML5, es una etiqueta especial 
llamada DOCTYPE, esta línea indica al navegador el tipo de documento que va a leer. 

En lenguajes como XHTML 1.0 se aplica también la definición del tipo de 
documento pero la línea que se indica seria parecida a la siguiente. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

Como se puede observar es una línea que no permite una lectura fácil de la misma, 
ya que se incluyen en ellas la especificación del tipo de documento, así como la ubicación 
del mismo en el sitio web del consorcio W3C, y hace bastante complicada la compresión 
por parte del usuario así como el recordar de memoria la especificación del tipo de 
documento. 

Esto forzaba a la mayoría de diseñadores o programadores web a copiar y pegar la 
línea de especificación de documento de un archivo a otro. 

La nueva versión del lenguaje HTML5 mejora considerablemente la especificación 
del tipo de documento, ya que se ha incluido una especificación de tipo de documento 
corta y de fácil aprendizaje. 

Cuando observe el código fuente de cualquier página Web, es normal encontrarse 
con la etiqueta que sirve para especificar el DTD (Definición del Tipo de Documento) al 
principio del documento. 

Esta etiqueta se denomina < !DOCTYPE> e indica que versión de XHTML o HTML 
se utiliza en el documento, para que los navegadores puedan aplicar la gramática y sintaxis 
correspondiente al documento. 

Otra de las aplicaciones que tiene la etiqueta con respecto a los navegadores es la 
de activar el modo estándar o estricto, o el modo de compatibilidad (“quirk”). 

El no utilizar actualmente la etiqueta de definición del documento puede suponer 
que el navegador no interprete en su visualización la página como debe y por lo tanto 
presentar diferencias en el formato de la página entre distintos navegadores. 
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Es por ello que es importante especificar el tipo de documento, ya que garantiza 
que el navegador actúe de forma estricta y no se produzcan diferencias en la interpretación 
del código HTML recibido. 


Para realizar la especificación del tipo de documento y que este se corresponda con 
la definición del lenguaje HTML 5, se ha de emplear la siguiente etiqueta. 


<!DOCTYPE html> 


Como se puede ver es simple y fácil de recordar, ya que solo se ha de especificar la 
palabra clave “html”, la cual indica que el documento es un documento estructurado con el 
lenguaje HTML5. 

Se ha de tener en cuenta que muchas veces en los documentos que se crean se 
considera como un buen estilo de diseño, el incluir o especificar el lenguaje natural que se 
utiliza para crear el documento. 

Para realizar esta acción es conveniente añadir a la etiqueta de inicio de 
página <html>, el atributo que permite especificar el lenguaje, quedando la misma de la 
siguiente forma. 

<html lang="es"> 


Al igual que es conveniente especificar el lenguaje también es conveniente, 
especificar el juego de codificación de caracteres que se ha de utilizar para realizar la 
visualización de la página. 

De esta forma se hace coincidir los símbolos que componen el lenguaje natural 
utilizado para la creación del documento, con los símbolos que se visualizan en el 
navegador. 

Para realizar esta acción se ha de utilizar la siguiente etiqueta, especificando la 
misma dentro de la cabecera del documento. 


<meta charset="utf-8"> 


El ejemplo especificado aquí, indica que se utilice la codificación utf-8, entre las 
codificaciones más utilizadas, encontramos la utf-8 y la ISO-8859-1, utilizada esta última 
para la codificación de caracteres de lengua latina. 

El siguiente ejemplo muestra una estructura de página con lenguaje y codificación 
de caracteres especificada. 
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<!DOCTYPEhtml> 

<html> 

<head> 

<meta charset="ISO-8859-1 "> 


<title>Primer Ejercicio HTML 5</title> 

</head> 

<body> 

<p>Esperamos que <strong> aprendoencasa.com</strong> sea un lugar donde estéis 
cómodos</p> 

</body> 

</html> 


Etiqueta <!DOCTYPE> 


Como se ha comentado anteriormente en el apartado anterior, la 
etiqueta < !DOCTYPE>, es la encargada de indicar al navegador cual es el tipo de 
documento web del que se va a realizar la carga en el navegador. 

Esta etiqueta permite que el navegador se ajuste lo más adecuadamente posible a la 
visualización del documento, ahorrando tiempo en la carga del mismo. 

Como es lógico los navegadores soportan diferentes tipos de documento web, y es 
por eso que esta etiqueta se hace necesaria para advertir al navegador el tipo de 
documento que se carga en el mismo. 

Existen varios tipos de definición de documentos, para HTML 4, XHTML, HTML5, 
etc. En el caso que nos ocupa la definición de documento necesaria es la especificación del 
tipo para documento HTML5, y aquí es donde viene lo bueno, en esta versión de HTML se 
ha simplificado al máximo la definición del tipo de documento ya que este está compuesto 
solo por los siguientes elementos. 

I o Apertura de la etiqueta y etiqueta 

La apertura de etiqueta se realiza utilizando el símbolo menor “<”, a continuación 
se escribe la etiqueta de definición o tipo de documento siendo 1D0CTYPE. 

2 o Tipo de documento y cierre de etiqueta 
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A continuación se ha de especificar el tipo de documento a cargar, que para la 
versión de HTML5, su palabra reservada es solo “html”. Y a continuación el cierre de 
etiqueta, representada por el símbolo mayor 

De esta forma la etiqueta completa queda de la siguiente forma: 

<!DOCTYPE html> 


Según la especificación del consorcio W3C es indiferente que se utilice mayúsculas 
o minúsculas, en toda la etiqueta, aunque muchos diseñadores o programadores que 
vienen del lenguaje XHTML, siguen prefiriendo el hecho de escribir en minúsculas, de esta 
forma no tienen ningún problema a la hora de realizar su paso a HTML5, de hecho es muy 
probable que se llegue a especificar una variante, sino existe ya del lenguaje HTML5, 
adaptado a XHTML en su sintaxis. 


Como curiosidad algunos diseñadores y programadores insertan en la etiqueta un 
atributo denominado public, seguido de una cadena de texto o un símbolo en formato 
Unicode, no tiene ningún efecto ya que el navegador al tratarse de HTML5 no la interpreta 
y puede servir para añadir algún comentario como si de un “huevo de pascua” se tratara. 
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HTML 


Curso de introducción al diseño Web 


Ejercicios 1 


I o Específica a continuación, buscando información en internet para ello, la 
definición de documento de xhtml y la de html5. 

Utiliza este espacio para escribir tus respuestas. 
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Etiqueta <HTML> 

Documento Web 

La etiqueta <html>, se utiliza para indicar al navegador que el documento que se 
visualiza está realizado en el lenguaje HTML. 

Es también la etiqueta raíz del resto de etiquetas del lenguaje, es decir el resto de 
etiquetas del lenguaje HTML5, están contenidas dentro de ella, con la única excepción de 
la etiqueta correspondiente al tipo de documento. 

El formato de la etiqueta con sus atributos posibles es el siguiente: 

<html manifest="valor"> 

Contenido del documento web, resto de etiquetas... 

</html> 

Entre los atributos que se pueden destacar de la etiqueta encontramos los 
siguientes: 

manifest 

Si se especifica el atributo, permite activar un mecanismo de caché 1 que 
permite que las aplicaciones web se ejecuten sin estar online o sin conexión. 

Los programadores utilizan esta caché o recurso (“archivo de datos”) para 
especificar donde se guardan los datos y tener la posibilidad de trabajar con los 
mismos aunque no se tenga conexión. 

Las aplicaciones que utilizan caché se cargan y funcionan adecuadamente 
aun no estando conectados. 

Entre los beneficios de utilizar una cache se pueden indicar los siguientes: 

• Navegar sin conexión 

• Velocidad en la carga de recursos, ya que al encontrase guardados en local, 
cargan más rápidos. 

• Y por último se reduce también la petición de datos al servidor, ya que solo se 
descargan los recursos o datos que se modifiquen. 


1 Se llama caché web a la caché que almacena documentos web (es decir, páginas, imágenes, etcétera) para reducir el ancho de 
banda consumido, la carga de los servidores y el retardo en la descarga. Un caché web almacena copias de los documentos que 
pasan por él, de forma que subsiguientes peticiones pueden ser respondidas por el propio caché, si se cumplen ciertas 
condiciones. 
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El formato de la etiqueta utilizando el atributo de caché es el siguiente: 



<html manifest="datos.appcache"> 

Contenido del documento... 

</html> 

Se especifica el nombre del archivo donde se almacena la información de la 
caché, a este nombre de archivo se le da la extensión “.appcache”. 

El siguiente ejemplo muestra un documento web con el manifiesto de caché 
activado: 

<!DOCTYPE html> 

<html manifest-'ejerciciol ,appcache"> 

<head> 

<meta charset="utf-8"> 

<title>Ejercicio HTML 5</title> 

</head> 

<body> 

<p>Esperamos que <strong> aprendoencasa.com</strong> sea un lugar donde estéis 
cómodos</p> 

</body> 

</html> 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 









22 www.aprendoencasa.com 


HTML! 


Curso de introducción al diseño Web 


ENCABEZADO DEL DOCUMENTO 


Etiqueta <HEAD> 

Encabezado del documento HTML 

Como se ha explicado anteriormente una de las partes principales en la estructura 
de un documento web, es la sección de cabecera del mismo, la cual se define mediante la 
etiqueta <head> </head> . La explicación formal de esta etiqueta es que sirve de 
contenedor para el resto de etiquetas que puede contener esta sección. 

El formato de la etiqueta es el siguiente: 


<head> 

... elementos o etiquetas que componen el encabezado del documento html.... 

</head 


Entre las etiquetas destacables que puede contener la sección de encabezado, se 
pueden encontrar las que se especifican en las siguientes secciones del libro. 

Etiqueta <TITLE> 

Encabezado del documento HTML 

La etiqueta < title > “titulo”, sirve para definir el título del documento, siendo 
requerida u obligatoria en todos los documentos. 

El título es el único elemento de la sección encabezado que es visible y 
normalmente los navegadores lo visualizan en la barra de título de la ventana, o en caso de 
ser un navegador que muestre pestañas, se muestra como título de la pestaña. 

También es usada por los navegadores para añadir la página a su agenda de favoritos con el 
título especificado y por último los motores de búsqueda la utilizan para indexar la página. 

El formato de la etiqueta es el siguiente: 

<head> 

<title>/M) del documento<Me> 

<head> 
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Etiqueta <META> 

Encabezado del documento HTML 

La etiqueta <meta> sirve para definir datos (“metadatos”) sobre el documento 
web o html, estos datos no son visualizados por el navegador, ya que se encuentran 
incluidos en la sección de encabezado y se suelen utilizar para establecer valores como 
palabras claves (“ keywords “), descripción de la página, autor de la misma, última fecha de 
modificación, etc. 

Estos datos son utilizados por los navegadores por ejemplo, para recargar la página 
o establecer valores de visualización de la misma. 

Los buscadores suelen utilizar las keywords para establecer valores de búsqueda 
para la página, mientras que otros tipos de datos podrían ser utilizados por otros tipos de 
servicio web. 

El formato de la etiqueta es el siguiente: 

<meta atributo=valor > 

Entre los atributos a destacar podemos encontrar los siguientes: 

charset 

Este atributo permite establecer el conjunto de caracteres que ha de utilizar 
el navegador para visualizar la información del documento E1TML que se está 
representando. 

La sintaxis para definir esta etiqueta con el atributo charset es la siguiente: 

<meta charset = “conjunto de caracteres “> 

Los conjuntos de caracteres que más se suelen utilizar son UTF-8 y ISO- 
8839-1, que se corresponden con la codificación Unicode y el juego de caracteres 
para el alfabeto Latín. 

El siguiente ejemplo establece un juego de caracteres Unicode para el documento. 

<html> 

<head> 

<t¡tl ^Aprendo en casa, Ejercicios HTML</ title> 

<meta charset- 
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</head> 

<body> 

</body> 

</html> 


ñame, content 

Estos atributos permiten definir pares de datos, es decir un nombre de valor 
con su respectivo valor o contenido. 

El atributo ñame sirve para establecer el nombre del dato que se quiere 
definir, mientras que content sirve para establecer el valor o contenido que se le 
quiere dar al dato. 

Entre los datos que se suelen utilizar están application-name, 
author,description, generator y keywords. 


ñame (“Nombre”) 

Descripción 

application-name 

Se utiliza para definir el nombre de la aplicación de la 
cual forma parte el documento web. 

author 

Se utilizar para definir el nombre del autor del 
documento web. 

description 

Se utiliza para definir una descripción del documento 
web, es utilizada por los motores de búsqueda, para 
establecer resultados. 

generator 

Se utiliza para especificar el nombre del programa con 
el que se ha creado el documento web. 

keywords 

Se utiliza para indicar una serie de términos o palabras 
que sirven para establecer categorías en la cual el 
documento web puede ser incluido. Suele ser utilizada 
por los motores de búsqueda para establecer 
búsquedas y categorías de los documentos. 


El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto 
con los atributos comentados anteriormente: 


<html> 

<head> 

<title>Ejercicios y prácticas HTML, aprendoencasa.com</title> 
<meta charset -'IS0-8859-1"> 
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<meta nam-'appHcation-name'' content-'Ejerciciosy prácticas 1,0"> 

<meta nam e-'author' 1 content="aprendoencasa.com"> 

<meta nme-'description" contení-'Prácticas y ejercicios de HTML"> 

<meta nme-'generatof content="aprendoencasa.es"> 

<meta nme-'keywords!' contení-'ejercicios, practicas, programación, html, etc."> 
</head> 

<body> 

</body> 

</html> 

http-equiv 

Este atributo se suele utilizar para especificar y simular atributos de cabecera 
del protocolo HTTP. Se utiliza estableciendo un valor para el atributo, al igual que el 
atributo anterior, entre los atributos se pueden destacar los siguientes: content- 
type, default-style y refresh. 


http-equiv 

Descripción 

content-type 

Se utiliza para especificar el juego de caracteres de 
codificación del documento. 

default-style 

Se utiliza para especificar la hoja de estilos 
preferida. 

refresh 

Se utiliza para establecer un intervalo de refresco 
del documento web, el cual será actualizado por el 
navegador transcurrido el tiempo especificado. 


El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto 
con los atributos comentados anteriormente: 


<html> 

<head> 

<title>Ejercicios y prácticas HTML, aprendoencasa.com</title> 

<meta charset-'ISO-8859-1 "> 

<meta name-'application-name" content-'Ejercicios y prácticas 1,0"> 
<meta name-'author" content="aprendoencasa.com"> 

<meta name-'description" contení-'Prácticas y ejercicios de HTML"> 
<meta name-'generator" co n te nt="a p re n d o e n ca sa. es"> 
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<meta name-'keywords" content-'ejerciclos, practicas, programación, html, etc."> 
<meta http-equi N-'refresh" contení-'400"> 

<meta http-equlv="raflto?Mj//?U' contení-'text/html; charset=ISO-8859-1"> 
</head> 

<body> 

</body> 

</html> 


Etiqueta <BASE> 

Encabezado del documento HTML 

La etiqueta <base>, permite especificar una URL 2 por defecto y un destino por 
defecto para todos los enlaces relativos del documento web. Es una etiqueta englobada 
dentro de la categoría de Contenido de Metadatos. 

La etiqueta solo puede aparecer una única vez dentro del documento web y ha de 
situarse a continuación de la etiqueta de encabezado de documento <head>, siendo así 
la primera etiqueta del encabezado. 

Se ha de tener en cuenta también, que es una etiqueta sin cierre, es decir no existe 
etiqueta de cierre de la misma y por tanto se utiliza el formato abreviado para cerrar la 
misma. 


El formato de la etiqueta es el siguiente: 

<base href-'valor" target-'valor" / > 

Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes: 

href 


Este atributo permite establecer la URL base para todas las URL’s relativas 
que existen en el documento web. 

La sintaxis para definir esta etiqueta con el atributo href es la siguiente: 

<base href-'valor URL" /> 


2 URL (Uniform Resource Locator): Localizador uniforme de recurso. Es una secuencia de caracteres, de acuerdo a un formato 
estándar y modélico, que se utiliza para nombrar recursos en Internet, para su localización o identificación. 
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target 

El atributo permite especificar el destino por defecto para todos los enlaces 
y formularios del documento web. 

La sintaxis para definir la etiqueta con el atributo target es la siguiente: 

<base href-'valor"" target-'valor" /> 

Entre los posibles valores que se le pueden aplicar al atributo target, 
encontramos los siguientes: 


Target 

Descripción 

_blank 

Especifica que el destino sea una nueva ventana 
del navegador, o una nueva pestaña. 

_self 

Por defecto. Abre el destino en el mismo lugar 
donde se haya realizado el clic. 

parent 

Abre el destino en un marco asociado. 

_top 

Abre el destino ocupando todo el cuerpo de la 
ventana. 

Framename 

Abre el destino en el marco del cual se 
especifica el nombre. 


El siguiente ejemplo muestra el uso de la etiqueta <base> en conjunto 
con los atributos especificados anteriormente: 

<head> 

<base href="http://www.aprendoencasa.com/images/" target-'_blank"> 

</head> 

<body> 

<¡mg src- 'stickman.gif" width="24" height-'39" alt="Stickman"> 

<a href="http://www.aprendoencasa.com">W3Schools</a> 

</body> 
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Etiqueta <LINK> 

Encabezado del documento HTML 

La etiqueta <link>, permite realizar la carga y establecer la relación existente 
entre el documento web actual y un recurso externo. Esta etiqueta es normalmente muy 
utilizada para realizar la carga de hojas de estilo para el documento web. 

Esta etiqueta comprendida en la categoría de Contenido de Metadatos, es una 
etiqueta de las denominadas “vacías”, es decir normalmente solo se especifica su etiqueta 
de inicio y no tiene ningún tipo de contenido, limitándose la información y configuración 
de la misma a los atributos de los cuales dispone. 

La etiqueta se suele insertar en la sección de encabezado del documento web, 
aunque es posible encontrarla en otros sitios, al final del documento por ejemplo, lo más 
adecuado es situarla donde se ha indicado. 

El formato de la etiqueta con todos sus atributos es el siguiente: 

<link href-'valor" hreflang-'valor" media-'valor" reí-'valor" sizes-'valor" 

types-'valor" ></link> 

Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes: 

href 


Este atributo permite establecer la URL en la que se encuentra el 
documento el cual se quiere enlazar, con el documento web. 

La sintaxis para definir esta etiqueta con el atributo href es la siguiente: 

<llnk href-'valor URL"></llnk> 


hreflang 

Este atributo permite establecer el lenguaje del documento que se está 
enlazando, aunque no realiza ninguna función especial en los navegadores, puede 
ser utilizado por los motores de búsqueda para establecer el idioma. 

La sintaxis para definir esta etiqueta con el atributo hreflang es la siguiente: 

<link href-'URL" hreflang- 'Codigodelenguaje" ></link> 

El código de lenguaje se puede consultar utilizando la siguiente dirección 
de internet: 
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http://www.w3schools.com/tags/ref_language_codes.asp 

reí 



El atributo sirve para especificar la relación existente entre el documento 
web y el documento con el que se está realizando el enlace. El atributo es 
obligatorio y se ha de incluir. 

La sintaxis para definir esta etiqueta con el atributo reí es la siguiente: 

<link href-'URL" hreflang-'CodigoLenguaje" rel="valor"></l¡nk> 

Entre los posibles valores que se pueden aplicar al atributo reí se 
encuentran los siguientes: 


Reí 

Descripción 

altérnate 

Especifica la relación del documento con una 
versión alternativa del mismo. (Impresora, 

Espejo, Traducida, Etc.) 

author 

Especifica la relación del enlace con el autor del 
documento con el que se enlaza. 

help 

Especifica relación con el documento de ayuda. 

icón 

Se utiliza normalmente para asociar un pequeño 
icono con el documento web. Este icono suele 
ser visible en la barra de dirección del 
navegador. 

license 

Especifica la información de copyright sobre el 
documento web. 

next 

Especifica que el documento web, es parte de 
una serie de documentos, e indica que el 
documento que enlaza es el siguiente en la 
serie. 

prefetch (prerender) 

Sirve para especificar desde el documento web 
que se está cargando, cual es el próximo 
documento web que se ha de cargar, de esta 
forma el navegador solicita una petición de 
cache, cargándose posteriormente la página 
más rápidamente. 

prev 

Especifica que el documento web, es parte de 
una serie de documentos, e indica que el 
documento que enlaza es el anterior en la serie. 
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search 

Especifica que el enlace es a la utilidad de 
búsqueda en el documento. 

stylesheet 

El más utilizado, especifica que el documento 
con el cual se enlaza es una hoja de estilos a 
importar, que aplicara formato al documento 
web. 


sizes 


El atributo se utiliza solo en caso de haber especificado anteriormente en el 
atributo reí el valor icón, y permite especificar el tamaño del atributo con el cual se 
está enlazando, aunque es soportada por el lenguaje html5, los navegadores a fecha 
actual no la implementan. 

La sintaxis para definir esta etiqueta con el atributo sizes es la siguiente: 

<link rel="icon" href="demo_icono.gif" type-'image/gif" sizes="16x16"> 

Entre sus posibles atributos se pueden encontrar los siguientes: 


Sizes 

Descripción 

AnchoxAlto 

Se ha de especificar los valores de ancho y alto 
insertando entre ellos el símbolo “x”, por 
ejemplo 16x16,32x32, se pueden insertar varios 
tamaños separados por espacios en blanco. 
“16x1632x32”. 

any 

Indica que el icono con el cual se enlaza es 
escalable, como si de una imagen svg se tratara. 

type 


Sirve para especificar el tipo MIME 3 del documento con el que se está 
realizando el enlace. Se pueden consultar los tipos mime en la siguiente dirección: 

http://www.iana.org/assignments/media-types 

La sintaxis para definir esta etiqueta con el atributo types es la siguiente: 


<l¡nktype="ValorMime"> 


3 Multipurpose Internet Mail Extensions o MIME (en español "extensiones multipropósito de correo de internet") son una serie 
de convenciones o especificaciones dirigidas al intercambio a través de Internet de todo tipo de archivos (texto, audio, vídeo, 
etc.) de forma transparente para el usuario. 
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Entre los tipos se puede encontrar el de hoja de estilos como es “text/css”, o el de 
texto plano “text/plain”, etc. 


media 


Este atributo se ha modificado bastante en esta última versión del lenguaje, 
y aunque nos centraremos posteriormente más en el mismo, inicialmente servirá 
para indicar el tipo de dispositivo para el cual se está realizando el enlace. 

La sintaxis para definir esta etiqueta con el atributo media es la siguiente: 

<link reí-'Valor" type-'Valor" href-'URL" media="valor"> 

Entre los posibles valores de dispositivos que encontramos para el atributo 
media, se encuentran los siguientes: 


Media 

Descripción 

all 

Valor por defecto, especifica todo tipo de dispositivos. 

aural 

Sirve para especificar que el dispositivo para el que se enlaza 
es un sintetizador de voz. 

braille 

Especifica un dispositivo de tipo braille. 

handhelp 

Especifica un dispositivo de mano, de pantalla pequeña o 
ancho de banda limitado. 

projection 

Especifica un dispositivo de tipo proyector. 

print 

Especifica un dispositivo de impresión. 

screen 

Especifica un dispositivo de pantalla de pe. 

tty 

Especifica un dispositivo de tipo teletipo, que utiliza 
caracteres de tamaño fijo. 

tv 

Especifica un dispositivo de tipo televisión. 


Como se ha indicado anteriormente el atributo tiene muchas más opciones 
que se profundizaran en las mismas a lo largo del desarrollo del temario. 

El siguiente ejemplo muestra el uso de la etiqueta < link > en conjunto con 
los atributos comentados anteriormente: 

<!DOCTYPE html> 

<html> 

<head> 

<title>Ejercicios y prácticas HTML, aprendoencasa.com</title> 

<meta charset-'ISO-8859-1 "> 

<meta name-'application-name" content-'Ejercicios y prácticas 1,0"> 
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<meta name-'author" content-'Lucia Castillo"> 

<meta name-'description" contení-'Prácticas y ejercicios de HTML"> 

<meta name-'keywords" content-'ejercicios, practicas, programación, html, etc."> 
<meta http-equi v-'refresh" content="400"> 

<meta http-equi v-'content-typé' conte nt-'text/html; charset=ISO-8859-1"> 

<link rel-’stylesheet" type="text/css" href-’theme.css" hreflang-'es"> 

<link rel="shortcut icón" href="/favicon.ico"> 

</head> 

<body> 

</body> 

</html> 


Etiqueta <SCRIPT> 


La etiqueta <script> permite la inserción de códigos script, como puede ser 
JavaScript en un documento web del lado del cliente 4 . El código se puede insertar 
directamente entre las etiquetas o haciendo referencia a un documento externo el cual 
contiene el código script a ejecutar. En este último caso la etiqueta de script no ha de tener 
contenido. 

Los “navegadores” o visualizadores realizan la carga del documento web de forma 
secuencial, cuando el navegador se encuentra con una etiqueta de script y esta contiene el 
atributo src, puede provocar que si el script es muy lento en su ejecución o cuando se 
carga el script y este hace referencia a un elemento del documento web, que no ha sido 
cargado todavía, pueda producirse un error de ejecución en el documento. 

Para evitar estas situaciones se ha de plantear donde situar los códigos de script, 
aunque inicialmente se plantea que estos se carguen en el encabezado, realmente se 
pueden cargar en cualquier parte del documento web. Por lo tanto es conveniente situar 
los script después de los elementos del documento web a los cuales hagan referencia. Una 
técnica muy utilizada era situar los Scripts al final del documento web, antes de la etiqueta 
de cierre del mismo. 

En HTML5 se pueden utilizar los atributos de la etiqueta como son async y defer, 
los cuales permitirían la inserción del código de script indicando a su vez cuando se han de 
ejecutar los mismos. 


4 Aunque el envió del script se realiza por el servidor al acceder al documento web, normalmente los script se insertar para que 
una vez cargados por el “navegador”, este último sea el que se encargue de la ejecución del código (ejecución en el lado del 
cliente, el que accede al documento). 
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0 

El formato de la etiqueta con todos sus atributos puede ser uno de los siguientes: 


<scripttype="valor" src-'URL" charset-'valor" async></script> 


<scripttype="valor" src-'URL" charset-'valor" defer></script> 


<script type="valor" > Contenido código fuente script </script> 

Entre sus atributos se encuentran los siguientes: 

async 

Se puede utilizar solo cuando el script es externo, es decir se ha especificado 
el atributo src, indicando que se cargue el script desde un documento exterior. 

Es un atributo booleano, es decir está activado (verdad), si se especifica en 
la etiqueta y esta desactivado (false) si no se especifica. 

Si el atributo se especifica los script del documento serán ejecutados de 
forma asincrona, es decir se ejecutaran en el momento que tengan oportunidad y 
han sido cargados completamente antes de la carga de documento final. Esto no 
garantiza por tanto el orden de ejecución de los mismos. 

defer 


Se puede utilizar solo cuando el script es externo, es decir se ha especificado 
el atributo src, indicando que se cargue el script desde un documento exterior. 

Es un atributo booleano complementario de async, está activado si aparece 
y desactivado si no lo hace. No es complementario del atributo async, hay que 
indicar que aparece un atributo u otro, no los dos a la vez. 

Si se especifica el atributo los script del documento serán cargados y 
ejecutados, cuando se haya finalizado la carga del documento. De esta forma se 
garantiza que los Scripts serán ejecutados en el orden en el que se han cargado 
dentro del documento web. 

En el caso de no especificarse ninguno de los atributos los script son 
ejecutados en el momento de ser leídos en el orden natural de lectura del 
documento web, no garantizándose así que el script pueda dar problemas por 
referencias a elementos no cargados. 
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type 

Permite especificar el tipo MIME del script. El tipo MIME está compuesto de 
dos partes una el tipo seguido de una barra y el subtipo. Por defecto el tipo MIME 
en caso de no especificarse es “text/javascript”. 

Entre los posibles valores de este atributo se pueden encontrar las 
siguientes, siendo los más comunes: 


Type 

Descripción 

text/javascript 

Scripts en lenguaje javascript 

text/ecmascript 

Especificación de lenguaje de programación 
publicada por ECMA International basado en 
javascript. 

application/javascript 

Igual que text/javascript, aunque es 
preferible utilizar el anterior. 

text/vbscript 

Especificación de lenguaje de programación 
interpretado basado en Visual Basic. 


src 


El atributo permite especificar la dirección URL del recurso al cual se quiere 
acceder, siendo en este caso el archivo que contiene el código de script a cargar en 
el documento web. La ruta puede ser relativa o absoluta. 

charset 

Solo se ha de especificar en el caso de que se esté realizando la carga de un 
script externo mediante el atributo src. Sirve para especificar el juego de caracteres 
y codificación del archivo que se está cargando. 

El siguiente ejemplo muestra el uso de la etiqueta < script > en conjunto con los 
atributos comentados anteriormente: 

<!DOCTYPEhtml> 

<html> 

<head> 

<title>Ejercicios y prácticas HTML, aprendoencasa.com</title> 

<meta charset="UTF-8"> 

<meta name-'application-name" content-'Ejerciciosy prácticas 1.0"> 

<meta name-'description" content-'Prácticas y ejercicios de HTML"> 

</head> 
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<body> 

<script type="text/javascript"> 

document.write("Hola Mundo"); 
</script> 

</body> 

</html> 


Etiqueta <NOSCRIPT> 


La etiqueta <noscript>, es complementaria de la anterior, ya que se utiliza para 
definir un contenido alternativo en el documento web, cuando el navegador no soporta la 
ejecución de Scripts, o bien cuando los mismos están desactivados en el navegador que 
recibe el documento. 

La etiqueta se puede utilizar dentro del encabezado del documento o bien en el 
cuerpo del mismo, dependiendo de su posición se suele utilizar de forma distinta. 

Normalmente si se utiliza en el encabezado del documento, es decir dentro de la 
etiqueta <head>, suele afectar a etiquetas como < link>, < style > y <meta>, de 
forma que permite realizar la carga alternativa de estos elementos en caso de que el 
navegador no permite la ejecución de Scripts. 

Por otra parte se suele utilizar dentro del cuerpo del documento para indicar que el 
navegador no permite la ejecución del script que se intenta ejecutar. 

La etiqueta no tiene atributos y es soportada en la mayoría de navegadores, siendo 
su sintaxis la siguiente. 

<noscript> Contenido a visualizar o cargar por el navegador </noscript> 

El siguiente ejemplo muestra el uso de la etiqueta dentro de la sección de 
encabezado, visualizando un mensaje: 

<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejemplo etiqueta noscript</title> 

<meta charset="utf-8" > 

<meta name="author" content-'José Sáez"/> 
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<meta name-'description" content="Ejercicios HTML5"/> 

<link rel="shortcut ¡con" href="favicon.ico" type="image/x-icon" /> 

<scr¡pt defer src- l simple2.js"></script> 

<noscr¡pt> 

<h1>Se requiere Javascript</h1> 

<p>No se puede usar esta página sin Javascript</p> 

</noscript> 

</head> 

<body> 

<p>Ejercicios y prácticas de programación Web HTML5</p> 

<a href="http://www.aprendoencasa.com">Visite aprendoencasa.com</a> 

<a href="page2.html">Pagina 2</a> 

</body> 

</html> 

El ejercicio anterior y con JavaScript desactivado en el navegador ha de visualizar 
un resultado similar al de la imagen siguiente: 



El siguiente ejemplo muestra el uso de la etiqueta dentro de la sección de 
encabezado, realizado una redirección a otro documento web en caso de no poder 
ejecutarse los Scripts. 

<!DOCTYPE HTML> 

<html> 

<head> 
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<t¡tle>Ejemplo etiqueta noscript</title> 

<meta charset="utf-8" /> 

<base href="http://aprendoencasa.com/imagenes/"/> 

<meta name="author" content="José Sáez"/> 

<meta name="description" content="Ejercicios y prácticas"/> 

<link rel="stylesheet" type="text/css" href="styles.css"/> 

<link rel="shortcut icón" href="favicon.ico" type="image/x-icon" /> 

<script defer src="simple2.js"></script> 

<noscript> 

<meta http-equiv-'refresh" content="0; http://www.aprendoencasa.com"/> 

</noscript> 

</head> 

<body> 

<p> 

Ejercicios de programación HTML5 
</p> 

<a href="http://aprendoencasa.com">Visite Aprendoencasa.com</a> 

<a href="page2.html">Pagina 2</a> 

</body> 

</html> 
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Ejercicios 2 


I o Realiza un documento web a continuación, en el cual se especifique el tipo de 
documento, el juego de caracteres, información relativa al autor, descripción, etc. e incluya 
un pequeño script que visualice el mensaje “Hola, soy un nuevo documento web.” y en 
caso de no tener JavaScript activado visualice un mensaje advirtiendo del hecho. 

Utiliza este espacio para escribir tus respuestas. 
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CUERPO DEL DOCUMENTO 


Etiqueta <BODY> 

Cuerpo del documento 

La etiqueta <body>, contenida dentro de las etiquetas del documento web 
(<html> </html>), sirven para definir lo que será el cuerpo del documento web, y su 
contenido será visualizado por el navegador. 

Básicamente la etiqueta es el contenedor del resto de etiquetas que aportan 
contenido al documento. 

En esta versión de HTML, se han quitado todos los atributos sobre la misma. 

La sintaxis de la etiqueta es la siguiente: 

<body> Contenido a visualizar por el navegador </body> 

El siguiente ejemplo muestra el uso de la etiqueta <body>, como contenedor del 
resto de etiquetas de contenido de cuerpo del documento web. 


<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejemplo etiqueta noscript</title> 

<meta charset="utf-8" /> 

<base href="http://aprendoencasa.com/imágenes/"/> 

<meta name="author" content- 'José Sáez"/> 

<meta name="description" content-'Ejercicios y prácticas"/> 

</head> 

<body> 

Ejercicios de programación HTML5 
</p> 

<p><a href="http://aprendoencasa.com">Visite Aprendoencasa.com</a></p> 
<p><a href="page2.html">Pagina 2</a></p> 

</body> 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 













Curso de introducción al diseño Web - www.aprendoencasa.com 


41 



</html> 


Etiqueta <P> 


La finalidad de la etiqueta <p> , es la de definir un párrafo, el texto encerrado 
entre las mismas será considerado por el navegador como un párrafo. 

El navegador realiza un ajuste automático de los párrafos al ancho de pantalla 
determinado por la ventana del programa navegador. 

Se ha de tener en cuenta que los navegadores cuando realizan la representación del 
lenguaje HTML5, no tienen en cuenta más de un espacio en blanco de separación entre 
palabras, es decir aunque deje con su editor de textos entre una palabra y otra más de un 
espacio en blanco, solo se visualizara uno descartándose el resto. 

Ocurre igual con los saltos de línea que pueda insertar dentro de un párrafo en su 
editor HTML5, el navegador solo interpretara como saltos de líneas aquellos que sean 
representados por su etiqueta equivalente. 

La sintaxis de la etiqueta es la siguiente: 

<p>Texto del párrafo</p> 

El siguiente ejemplo muestra el uso de la etiqueta: 

<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author 1 ' contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-'Ejercicios prácticos HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de 
texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 
1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido 
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usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos 
espécimen </p> 

</body> 

</html> 


El resultado del ejercicio anterior en el navegador ha de ser similar al siguiente: 


X 


B Ejercicios prácticos HTML x 

<- G D localhost/ejerc¡c¡oshtml5/code.html 

■■■ Aplicaciones CD aprendoencasa.com Cll Otros marcadores 

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido 
el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que 
se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer 
un libro de textos espécimen. No sólo sobrevivió 500 años, sino que también ingresó como texto de relleno 
en documentos electrónicos, quedando esencialmente igual al original Fue popularizado en los 60s con la 
creación de las hojas "Letraset". las cuales contenian pasajes de Lorem Ipsum, y más recientemente con 
software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum. 



Etiqueta <A> 


La etiqueta <a>, sirve para definir y crear un hiperenlace, el cual permite realizar 
enlaces del documento web con otros documentos o recursos disponibles. 

Por defecto los navegadores suelen visualizar los enlaces con una serie de colores 
predefinidos, aunque estos se pueden cambiar. 

Los enlaces no visitados se visualizan normalmente con el color azul, los enlaces 
visitados con el color purpura y por último los enlaces activos mediante el color rojo. 

Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha 
de mostrar en la misma ventana del navegador, sustituyendo el documento web actual por 
el que se quiere acceder. 

La sintaxis para esta etiqueta con todos sus atributos es la siguiente: 

<a href-'valor" hreflang-'valor" media-'valor" rel="valor"target-'valor" 
type="valor">Texto enlace</a> 
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Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes: 

href 


Este atributo permite establecer la URL en la que se encuentra el documento 
el cual se quiere enlazar, con el documento web. Se puede especificar una URL 
absoluta, relativa o un ancla “enlace” en el mismo documento. 

Si se realiza un enlace en el mismo documento a un objeto concreto se ha 
de utilizar como identificador del objeto el nombre del mismo que se haya 
proporcionado mediante el atributo “id”. 

Las posibles formas de sintaxis para definir esta etiqueta con el 
atributo href son las siguientes: 

<a href-'URL Absoluta">Texto del enlace</a> 

<a href-'URL Relativa">Texto del enlace</a> 

<a href-'Marcador en el mismo documento">Texto del enlace</a> 

hreflang 

Este atributo permite establecer el lenguaje del documento que se está 
enlazando, aunque no realiza ninguna función especial en los navegadores, puede 
ser utilizado por los motores de búsqueda para establecer el idioma. 

La sintaxis para definir esta etiqueta con el atributo hreflang es la siguiente: 

<a href-'URL" hreflang- 'Código de lenguaje"></a> 

El código de lenguaje se puede consultar utilizando la siguiente dirección 
de internet: 

http://www.w3schools.com/tags/ref_language_codes.asp 

reí 


El atributo sirve para especificar la relación existente entre el documento 
web y el documento con el que se está realizando el enlace. 

El atributo es obligatorio y se ha de incluir. 

La sintaxis para definir esta etiqueta con el atributo reí es la siguiente: 

<link href-'URL" hreflang-'Código Lenguaje" rel="valor"></llnk> 
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Entre los posibles valores que se pueden aplicar al atributo reí se 
encuentran los siguientes: 


Reí 

Descripción 

altérnate 

Especifica la relación del documento con una versión 
alternativa del mismo. (Impresora, Espejo, Traducida, 

Etc.) 

author 

Especifica la relación del enlace con el autor del 
documento con el que se enlaza. 

bookmark 

Especifica la URL que se utiliza como dirección 
permanente para los marcadores de los programas 
navegadores. 

help 

Especifica que el enlace tiene relación con un 
documento de ayuda. 

license 

Especifica que el enlace es a la información de copyright 
sobre el documento web. 

next 

Especifica que el documento web, es parte de una serie 
de documentos, e indica que el documento que enlaza 
es el siguiente en la serie. 

prefetch 

Sirve para especificar desde el documento web que se 
está cargando, cual es el próximo documento web que se 
ha de cargar, de esta forma el navegador solicita una 
petición de cache, cargándose posteriormente la página 
más rápidamente. 

prev 

Especifica que el documento web, es parte de una serie 
de documentos, e indica que el documento que enlaza 
es el anterior en la serie. 

search 

Especifica que el enlace es a la utilidad de búsqueda en el 
documento. 

nofollow 

Utilizado normalmente para especificar a los motores de 
búsqueda que no han de seguir el enlace. 

noreferrer 

Especifica que no se han de enviar referencias sobre la 
procedencia del enlace. 

tag 

Establece una etiqueta o palabra clave para el documento 
actual. 
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type 

Sirve para especificar el tipo MIME 3 del documento con el que se está 
realizando el enlace. Se pueden consultar los tipos mime en la siguiente dirección: 

http://www.iana.org/assignments/media-types 

La sintaxis para definir esta etiqueta con el atributo types es la siguiente: 

<a type="Va lorM i me">T exto del enlace</a> 

Entre los tipos se puede encontrar el de hoja de estilos como es “text/css”, o 
el de texto plano “text/plain”, etc. 

media 


Este atributo se ha modificado bastante en esta última versión del lenguaje, 
y aunque nos centraremos posteriormente más en el mismo, inicialmente servirá 
para indicar el tipo de dispositivo para el cual se está realizando el enlace. 

La sintaxis para definir esta etiqueta con el atributo media es la siguiente: 


<a href-'valor" hreflang-'valor" rel="Valor" type-'Valor" medla="valor">Texto 
Enlace</a> 


Entre los posibles valores de dispositivos que encontramos para el atributo 
media, se encuentran los siguientes: 


Media 

Descripción 

all 

Valor por defecto, especifica todo tipo de 
dispositivos. 

aural 

Sirve para especificar que el dispositivo para el 
que se enlaza es un sintetizador de voz. 

braille 

Especifica un dispositivo de tipo braille. 

handhelp 

Especifica un dispositivo de mano, de pantalla 
pequeña o ancho de banda limitado. 


5 Multipurpose rnternet Mail Extensions o MIME (en español "extensiones multipropósito de correo de internet") son una serie 
de convenciones o especificaciones dirigidas al intercambio a través de Internet de todo tipo de archivos (texto, audio, video, 
etc.) de forma transparente para el usuario. 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 






















46 www.aprendoencasa.com 


HTML5 


Curso de introducción al diseño Web 


projection 

Especifica un dispositivo de tipo projector. 

print 

Especifica un dispositivo de impresión. 

screen 

Especifica un dispositivo de pantalla de pe. 

tty 

Especifica un dispositivo de tipo teletipo, que 
utiliza caracteres de tamaño fijo. 

tv 

Especifica un dispositivo de tipo televisión. 


Como se ha indicado anteriormente el atributo tiene muchas más opciones 
en las que se profundizaran en las mismas a lo largo del desarrollo del temario. 


target 

El atributo permite especificar el destino por defecto para todos los enlaces 
y formularios del documento web. 

La sintaxis para definir la etiqueta con el atributo target es la siguiente: 

<a href="valor""target="valor">Texto del enlace</a> 

Entre los posibles valores que se le pueden aplicar al atributo target, 
encontramos los siguientes: 


target 

Descripción 

Jblank 

Especifica que el destino sea una nueva ventana 
del navegador, o una nueva pestaña. 

_self 

Por defecto. Abre el destino en el mismo lugar 
donde se haya realizado el clic. 

parent 

Abre el destino en un marco asociado. 

_top 

Abre el destino ocupando todo el cuerpo de la 
ventana. 

framename 

Abre el destino en el marco del cual se 
especifica el nombre. 


Los siguientes ejemplos muestran el uso de la etiqueta <a> en conjunto con los 
atributos comentados anteriormente, se muestra el uso de la etiqueta realizando enlaces 
dentro del propio documento, a documentos externos html y a recursos externos como 
pueden ser archivos de imagen, pdf, email, etc. Lógicamente para que su funcionamiento 
sea adecuado los recursos a los cuales se enlaza han de existir. 
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Enla ces internos en el documento _ 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejemplos Etiqueta a</title> 

<meta charset-'utf-8" /> 

<meta ñame-’author" content="José Sáez"/> 

<meta name-'description" content="Ejercicios y prácticas"/> 

</head> 

<body> 

<p>Ejercicios de programación HTML5</p> 

<p> 

<a href="#Parrafo1 ">Enlace Al Primer Párrafo</a><br/> 

<a href="#Parrafo2">Enlace Al Segundo Párrafo</a><br/> 

<a href="#Parrafo3">Enlace Al Tercero Párrafo</a><br/> 

</p> 

<p id="Parrafo1 ">Lorem Ipsum es simplemente el texto de relleno de las imprentas y 
archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias 
desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) 
desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un 
libro de textos espécimen. No sólo sobrevivió 500 años, sino que también ingresó como 
texto de relleno en documentos electrónicos, quedando esencialmente igual al original. 
Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenían 
pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por 
ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum </p> 

<p id="Parrafo2">Es un hecho establecido hace demasiado tiempo que un lector se 
distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de 
usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al 
contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos 
textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición 
y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer 
una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan 
este texto si se encuentran en estado de desarrollo. Muchas versiones han 
evolucionado a través de los años, algunas veces por accidente, otras veces a propósito 
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(por ejemplo insertándole humor y cosas por el estilo) </p> 

<p id="Parrafo3">AI contrario del pensamiento popular, el texto de Lorem Ipsum no es 
simplemente texto aleatorio. Tiene sus raíces en una pieza clásica de la literatura del 
Latín, que data del año 45 antes de Cristo, haciendo que este adquiera más de 2000 
años de antigüedad. Richard McCIintock, un profesor de Latín de la Universidad de 
Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua 
del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos 
textos del latín, descubrió la fuente indudable </p> 

<p><a href="http://aprendoencasa.com">Visite Aprendoencasa.com</a></p> 

</body> 

</html> 

En este ejercicio se realiza el enlace con tres identificadores, situados en cada uno 
de los párrafos mediante el atributo global “id”, para realizar los enlaces como valor del 
atributo href, se ha de especificar el id asignado a cada párrafo precedido del símbolo “#”. 

El resultado que se ha de obtener ha de ser similar al que se muestra en la siguiente 
imagen: 


X 


B Ejemplos Etiqueta a x 

<- -> C D localhost/ejercicioshtml5/ejerciciosenlaces.html , E 

£) CAM.ES : Inicio Gmail: el correo elec... ^ Glmp: Ejercicios de ... — Materiales » CU Otros marcadores 

A 

Ejercicios de programación HTML5 

Enlace Al Primer Párrafo 

Enlace Al Segundo Párrafo 

Enlace Al Tercero Párrafo 

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha 
sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. 
persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera 
que logró hacer un libro de textos espécimen. No sólo sobrevivió 500 años, sino que también ingresó 
como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue 
popularizado en los 60s con la creación de las hojas "Letraset", las cuales conteman pasajes de Lorem 
Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual 
incluye versiones de Lorem Ipsum. 

Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de 
un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o 
menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido 
aquí”. Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y 
editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de 
"Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado 
de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, 
localhost/.. /ejercíciosenlaces.html ño insertándole humor y cosas por el estilo). v 
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Enlaces a documentos web externos relativos y absolutos 



Al definir los enlaces, se puede especificar la ruta absoluta a los mismos, o una ruta 
relativa teniendo en cuenta el documento actual. 

En el siguiente ejemplo se muestra el uso de dichas rutas mostrando enlaces, a 
sitios web que se encuentran fuera del lugar donde está almacenado el documento. 

Y otros enlaces que muestran rutas relativas desde la posición actual del 
documento a otros documentos ubicados en el mismo sitio de alojamiento. 


<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejemplos Etiqueta a</title> 

<meta charset-'utf-8" /> 

<meta name-'author" contení-'José Sáez"/> 

<meta name-'description" content="Ejercicios y prácticas"/> 

</head> 

<body> 

<p>Ejercicios de programación HTML5</p> 

<p>Enlace a documento web situado en un sitio externo</p> 

<p><a href="http://aprendoencasa.com">Visite Aprendoencasa.com</a></p> 
<p>Enlaces a buscadores externos</p> 

<p><a href- 'http://www.google.es 1 ' title-'Buscador Google">Buscador 
Google</a></p> 

<p><a href="http://www.bing.es" title-'Buscador Bing">Buscador Bing</a></p> 
<p>Enlaces a documentos con rutas relativas</p> 

<p><a h ref=" ./i magenes/i mage n 1 .j pg">l m age n 1</a></p> 

<p><a h ref=". ./docum entos/pdfs/texto 1 . pdf">Texto 1</a></p> 

<p><a href="./paginas/segunda.html">Siguiente Página</a></p> 

</body> 

</html> 
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El resultado del ejercicio ha de ser similar al que se muestra en la imagen siguiente: 



□ Ejt«nploi Etiqvrt* • 



Enlaces a correo electrónico, ftp 

El siguiente ejemplo muestra el uso de realiza un enlace a una dirección de correo 
electrónico, aunque el enlace sea a una dirección de correo electrónico, para que el 
mensaje sea enviado se requiere que el usuario realice esta acción, ya que este tipo de 
enlaces abren el programa de correo electrónico para enviar el mensaje. Los 
desarrolladores web suelen emplear formularios para el envío de mensajes de correo, con 
programación en lenguajes como php, asp, javascript, etc. 

<!D0CTYPE HTML> 

<html> 

<head> 

<title>Ejemplos Etiqueta a</title> 

<meta charset="utf-8" /> 

<meta name-'author" contení-'José Sáez"/> 

<meta ñame-'description" content-'Ejercicios y prácticas"/> 

</head> 

<body> 

<p>Ejercicios de programación HTML5</p> 

<p>EI siguiente ejemplo muestra el uso de enlaces a correo electrónico</p> 
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<p>Para enviar un mensaje a <a href-'mailto:formacion@aprendoencasa'' title-'envió 
de email">formacion@aprendoencasa.com</a></p> 

<p>Para acceder a una dirección de ftp</p> 

<p>EI siguiente <a href="ftp://ftp.aprendoencasa.com/archivo.zip">enlace</a>, accede 
a un archivo en un servidor ftp </p> 

</body> 

</html> 

El resultado ha de ser similar al que se muestra en la siguiente imagen: 



Etiqueta <B> 


La etiqueta <b>, se utiliza para resaltar texto en el documento, aplicando un 
formato de negrita (“bold”), al mismo. 

Aunque actualmente el formato que se aplica a un documento web, se suele aplicar 
mediante hojas de estilos. 

El lenguaje html5, especifica lo que se denomina la web semántica, aplicando 
ciertas etiquetas al contenido, para indicar de esta forma que una parte del contenido sea 
más relevante que otra. 

El lenguaje E1TML5, recomienda utilizar esta etiqueta como último recurso y en el 
caso de que ninguna otra etiqueta sea más apropiada. 
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Recomendándose que para establecer títulos se utilicen las etiquetas 
correspondientes (hl..h6), mientras que para destacar texto se utilicen etiquetas como 
strong, mark o em. 

Como recordatorio, se indica que para poder resaltar texto en negrita se utilice la 
propiedad Font-weight, del lenguaje CSS. 

La utilización de la etiqueta es muy simple, ya que solo se ha de especificar el texto 
a resaltar entre la etiqueta de apertura y cierre, siendo la sintaxis la siguiente: 

<p>Texto <b>resaltado</b> en un párrafo</p> 

El ejemplo a continuación muestra el uso de la etiqueta para resaltar varias palabras 
en un documento web: 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejemplos Etiqueta b</title> 

<meta charset="utf-8" /> 

<meta ñame-’author" contení-'José Sáez"/> 

<meta name-'description" content="Ejercicios y prácticas"/> 

</head> 

<body> 

<p>Ejercicios de programación HTML5</p> 

<p>EI siguiente ejemplo muestra el uso de la <b>etiqueta b</b> para <b>resaltar</b> 
texto dentro de un párrafo</p> 

</body> 

</html> 

El resultado en el navegador ha de ser similar al que se muestra a continuación en 
la imagen: 
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Etiqueta <EM> 


La etiqueta <em>, se utiliza para resaltar texto en el documento dando “énfasis” 
al texto sobre el que se aplica la etiqueta. Aunque es posible aplicar el mismo efecto 
utilizando hojas de estilo, esta etiqueta no se ha suprimido para ajustarse a la web 
semántica. 

Los navegadores suelen visualizar el resultado de la etiqueta como un atributo de 
itálica o cursiva sobre el texto al que se le haya aplicado. 

La sintaxis de la etiqueta es la siguiente: 

<p>EI texto <em>siguiente</em> se ha resaltado con énfasis</p> 

El siguiente ejemplo muestra el uso de la etiqueta en combinación con otras 
etiquetas. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author 1 ' contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-'Ejercicios prácticos HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 
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<body> 

<p>EI siguiente <b>Párrafo</b> combina diferentes opciones para <b>resaltar</b> y 
dar <em>énfasis</em> al <b><em>texto</em></b> que se escribe en el mismo </p> 

</body> 

</html> 


El resultado del ejercicio anterior mostrado en el navegador, ha de ser similar al 
que se muestra a continuación: 



Etiqueta <STRONG> 


La etiqueta <strong> , se utiliza para definir en el documento texto considerado 
importante, produce en el navegador el efecto de aplicar negrita, aunque es posible aplicar 
el mismo efecto utilizando hojas de estilo. 

Se recomienda utilizar esta etiqueta para resaltar texto importante antes que utiliza 
la etiqueta comentada anteriormente <b>. 

La sintaxis de la etiqueta es la siguiente. 

<p>EI siguiente <strong>Texto</strong> esta resaltado en fuerte</p> 

El siguiente ejemplo muestra el uso de la etiqueta, resaltando un texto dentro de 
un párrafo. 

<!DOCTYPEHTML> 

<html> 
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<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>EI siguiente <strong>Párrafo</strong> combina diferentes opciones para 
<em>resaltar</em>y 

dar <em>énfasis</em> al <strong>texto</strong> que se escribe en el mismo.</p> 

</body> 

</html> 

El ejercicio anterior produce al visualizarse el siguiente resultado en el navegador: 



Etiqueta <CODE> 


La etiqueta <code>, permite definir texto resaltado, utilizando para indicar que el 
texto hace referencia bien a partes de un ordenador, o código fuente de programación. 

La sintaxis de la etiqueta es la siguiente: 

<p>EI siguiente <code>texto</code> está marcado como código</p> 
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El siguiente ejemplo muestra el uso de la etiqueta: 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>Partes de un sistema informático:<br/> 

<code>Unidad Central de Proceso</code><br/> 

<code>Memoria</code> 

</p> 

</body> 

</html> 


El resultado en el navegador del ejemplo anterior ha de ser similar al siguiente: 


X 


EJ Ejercicios prácticos HTM x 


4 - C Q localhost/ejercicioshtml5/code.html 

☆ ¥ = 

:*■ Aplicaciones , CAM.ES: Inicio » 

r~l Otros marcadores 

Partes de un sistema informático: 


Unidad Central de Proceso 


Memoria 



Etiqueta <SAMP> 
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La etiqueta <samp>, permite definir texto en el documento resaltado 
semánticamente, indicando que el texto marcado es la salida que proporciona un 
programa de ordenador. 



La sintaxis de la etiqueta es la siguiente: 


<p>Texto <samp>marcado</samp> como salida de datos de un programa</p> 


El siguiente ejemplo muestra el uso de la etiqueta. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-'Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>EI programa que se está analizando es el siguiente<br/> 
<code>printf("Hola Mundo Web");</code><br/></p> 

<p>EI resultado obtenido por el programa es el siguiente:<br/> 

<samp>Hola Mundo Web</samp></p> 

</body> 

</html> 


El resultado en el navegador ha de ser similar al que se muestra en la siguiente 
imagen: 
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_ n 


Ejercicios prácticos HTML x 


c D localhost/ejerc¡cioshtml5/code.html 

☆J = 1 

; ■■■ Aplicaciones £> CAM.ES : Inicio » 

r~l Otros marcadores 

El programa que se esta analizando es el siguiente 
printf ( "Hola Mundo Web"); 


El resultado obtenido por el programa es el siguiente: 

Hola Mundo Web 



Etiqueta <KBD> 


La etiqueta <kbd>, permite especificar un formato de texto para distinguir lo que 
el usuario tendría que teclear en la solicitud de un programa. 

La sintaxis de la etiqueta es la siguiente: 

<p>Texto <kbd>marcado</kbd> con etiqueta keyboard</p> 


El siguiente ejemplo muestra el uso de la etiqueta: 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 
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<body> 

<p>EI programa que se está analizando es el siguiente<br/> 
<code>printf("Hola Mundo Web");</code><br/> 

<samp>Teclee su dirección web: </samp></p> 

<p>Ha de teclear una dirección valida de internet:<br/> 
<kbd>www.aprendoencasa.com</kbd> a continuación pulsar lntro</p> 
</body> 

</html> 


El resultado que ha de mostrar el navegador ha de ser similar al siguiente: 



Etiqueta <VAR> 


La finalidad de la etiqueta <var>, es la de resaltar texto en el documento web, 
indicando que el mismo son la definición de variables en un programa de ordenador. 

La sintaxis de la etiqueta es la siguiente: 

<p>Este <var>texto</var> es la definición de una variable</p> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 
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<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-’author" content-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>EI programa que se está analizando es el siguiente<br/> 
<var>intx;</var><br/> 

<var>inty;</var></p> 

<p>Se ha solicitado la creación de dos variables</p> 

</body> 

</html> 

El resultado en el navegador del ejemplo anterior es el siguiente: 



Etiqueta <MARK> 


La etiqueta <mark>, permite realizar el marcado de un texto dentro del 
documento web, el efecto visual en el navegador del texto seleccionado, es como si se 
hubiera pasado un bolígrafo resaltador de texto por encima del texto que se haya 
seleccionado. 
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Versiones anteriores a la 9 del navegador internet explorer no soportan la etiqueta. 
La sintaxis de la etiqueta es la siguiente. 

<p>EI <mark>texto siguiente esta remarcado</mark> dentro del párrafo</p> 

El siguiente ejemplo muestra el uso de la etiqueta. 

<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" contení-'José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de 
texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 
1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido 
usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos 
espécimen. </p> 

<p><mark>No sólo sobrevivió 500 años, sino que también ingresó como texto de 
relleno en documentos electrónicos, quedando esencialmente igual al 
original</mark></p> 

</body> 

</html> 


El resultado en el navegador del ejercicio anterior ha de ser similar al siguiente: 
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x 


Ejercicios prácticos HTML X 

V- 

^ C D localhost/ejerc¡cioshtml5/code.html ^ V — 

■¡I Aplicaciones ^ CAM. ES : Inicio Gmail: el correo elec... » CU Otros marcadores 

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. 
Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500. 
cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una 
galería de textos y los mezcló de tal manera que logró hacer un libro de textos espécimen. 

No sólo sobredio 500 años, sino que también ingresó como texto de relleno en 
documentos electrónicos, quedando esencialmente igual al original. 


Etiqueta <CITE> 


La etiqueta <cite >, se utiliza para resaltar el texto correspondiente al título de un 
trabajo, como obra, autor, película, actor, etc. 

La sintaxis de la etiqueta es la siguiente: 

<p>Texto <cite>resaltado como cita</cite> dentro de un párrafo</p> 

El siguiente ejemplo muestra el uso de la etiqueta. 

<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

</head> 

<body> 

<p><cite>EI grito</cite> por Edward Munch. Pintado en 1893 </p> 

</body> 

</html> 

El resultado en el navegador del ejemplo anterior ha de ser similar a la imagen que 
se muestra a continuación. 
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Etiqueta <I> 


La etiqueta <i>, tiene como finalidad la de expresar semánticamente una parte 
del texto en una voz alternativa o un estado de ánimo diferente. Anteriormente era usada 
para visualizar un texto en itálica, siendo su efecto visible en el navegador. 

Se puede utilizar para expresar un término técnico, una frase en un idioma distinto, 
nombres de objetos concretos, pensamientos, etc. 

El W3C recomienda utilizar la etiqueta siempre y cuando semánticamente no exista 
otra posibilidad de utilizar una etiqueta distinta, como pueden ser em, strong, mark, etc. 

La sintaxis de la etiqueta es la siguiente: 

<p>Texto que se <i>quiere</i> resaltar semánticamente</p> 

El siguiente ejemplo muestra el uso de la etiqueta. 

<!DOCTYPE HTML> 

<html> 

<head> 

<tltle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 
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<body> 

<p>EI coche <i>Rayo McQueen</¡> es muy rápido </p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra a 
continuación: 


X 


Ejercicios prácticos HTM x 


♦- G D localhosVejercicioshtml5/code.html 


Aplicaciones Q] aprendcencasa.com 

n Otros marcadores 

El coche Rayo McQueen es muy rápido. 



Etiqueta <S> 


La etiqueta <s> , tiene como finalidad la de expresar que un texto en el 
documento no es correcto, exacto o no es pertinente. 

No se ha de utilizar para especificar un texto que ha sido reemplazado o borrado. 

El efecto de visualización que se produce en el navegador es el de tachado. 

La sintaxis de la etiqueta es la siguiente: 


<p>Este texto <s>no es correcto</s> y se define de esta forma</p> 


El siguiente ejemplo muestra el uso de la etiqueta. 


<!DOCTYPE HTML> 

<html> 
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<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>Ejercicios y prácticas de programación en <i>www.aprendoencasa.com</i>.</p> 
<p>Cursos totalmente gratuitos y de <s>pago</s>.</p> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al que se muestra a 
continuación. 



Etiqueta <U> 


La etiqueta <u>, se utiliza en esta última versión de HTML5, para definir texto 
estilísticamente diferente del texto normal o nombres propios en otros idiomas. 
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El consorcio W3C recomienda no utilizar esta etiqueta siempre y cuando se pueda 
emplear otra más adecuada para realzar el texto. 

El efecto visual sobre el texto al cual se aplica la etiqueta es que aparece subrayado, 
pudiendo llevar a confundir el texto con enlaces, los cuales normalmente suelen estar 
subrayados. 

La sintaxis para la etiqueta es la siguiente: 

<p>Esto es un <u>texto subrayado</u> en un párrafo</p> 

El siguiente ejemplo muestra el uso de la etiqueta. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" contení-José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Este párrafo contiene <u>Texto</u> que podría no interpretarse 
correctamente </p> 

</body> 

</html> 

El ejercicio anterior ha de mostrar un resultado similar al que se muestra a 
continuación. 


B Ejercicios prácticos HTML x 


^ C D localhostyejerc¡c¡oshtml5/code.html 

☆ V ="| 

Aplicaciones CU aprendoencasa.com 

n Otros marcadores 

Este párrafo contiene Texto que podría no interpretarse correctamente. 
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Etiqueta <SMALL> 



La etiqueta <small>, permite definir “texto pequeño”, es decir el texto que se 
encierre en la etiqueta será representado por el navegador con un tamaño de fuente más 
pequeño que el normal. 

La sintaxis de la etiqueta es la siguiente: 

<p>Este <small>Texto</small> destaca por su tamaño</p> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>www.aprendoencasa.com - Ejercicios y prácticas de programación web.</p> 
<p><small>Copyright 2006-2013 byjosé Sáez</small></p></p> 

</body> 

</html> 

El resultado del ejercicio anterior ha de ser similar al que se muestra a 
continuación. 
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Etiqueta <SUB> 


La etiqueta <sub>, permite definir un texto en subíndice, el texto subíndice 
aparece por debajo de la línea base de representación del texto, un ejemplo de utilización 
podría ser en formulas químicas como H 2 0. 

La sintaxis de la etiqueta es la siguiente. 

<p>EI siguiente <sub>texto</sub> permite definir un subíndice</p> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name="generator" content="Ejercicios prácticos HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>www.aprendoencasa.com - Ejercicios y prácticas de programación web </p> 

<p>EI siguiente texto contiene un <sub>subíndice</sub></p> 

<p>Aunque también se utiliza en fórmulas como H<sub>2</sub>0</p> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al que visualiza a 
continuación. 
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0 



Etiqueta <SUP> 


La etiqueta <sup> , realiza la definición de un texto en formato superíndice, el 
texto en este formato es visualizado por el navegador por encima de la línea base de texto. 

Se suele utilizar en muchas ocasiones para definir notas a pie de página, similares a 
la siguiente WWW 1 ' 

La sintaxis de la siguiente es la siguiente. 

<p>EI siguiente <sup>Texto</sup> está en superíndice</p> 

El siguiente ejemplo muestra el uso de la etiqueta. 


<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name="generator" content-'Ejercicios prácticos HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 
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<body> 

<p>www.aprendoencasa.com</p> 

<p>Ejercicios y prácticas de programación web <sup>1</sup></p> 
<hr/> 

<p>1 . Curso práctico de programación Web en html5</p> 

</body> 

</html> 


El resultado del ejercicio anterior en el navegador ha de ser similar al siguiente: 


X 


& Ejercicios prácticos HTML X 


4r Qt Q localhost/ejercicioshtml5/code.html 

☆ | # = 

II: Aplicaciones Q] aprendoencasa.com 

r~l Otros marcadores 

www. aprendoencasa.com 


Ejercicios y prácticas de programación web. 1 


1. Curso práctico de programación Web en html5 


Etiqueta <BR> y <WBR> 

Rupturas de línea y división de palabras 

Aunque en su editor HTML, deje líneas en blanco o introduzca saltos de línea 
forzados en un párrafo, se ha comentado anteriormente que el navegador realiza la 
omisión de los mismos, ya que la forma de indicar un salto es mediante las etiquetas de 
párrafo. 

Pero se puede realizar el forzado de salto de línea, utilizando para ello la etiqueta 
<br> , esta etiqueta permite realizar la inserción forzada de un salto de línea en el 
navegador. 
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Es una etiqueta de las denominadas “vacías”, es decir no tiene ni contenido, ni 
etiqueta de cierre. 



El salto de línea se produce en el lugar donde se sitúe la etiqueta y se mantiene 
independientemente aun cuando se altere el ancho de visualización del documento en el 
navegador. 


Como recomendación se indica que se ha de utilizar esta etiqueta solo para insertar 
saltos de línea forzados en el párrafo, y no utilizarla como separador de párrafos. 


La sintaxis de la etiqueta es la siguiente: 


<p>Este párrafo contiene un<br> salto de línea forzado</p> 


Otro posible pequeño problema, es cuando en un documento existen párrafos de 
gran tamaño, y en ellos se pueden encontrar palabras de un tamaño considerable, 
posiblemente porque sean términos técnicos. Si se intenta cambiar el ancho de 
visualización del navegador, el ajuste de párrafo que se produce, puede ocasionar que el 
párrafo no se visualice lo más justificado posible. 

Para solventar el problema expuesto, existe la siguiente etiqueta <wbr>, que 
permite definir por donde se realiza el salto de línea en un término que sea muy grande. 
Mientras que el texto quepa sin problemas en la línea del párrafo no se produce ningún 
corte en la palabra, si el termino no cabe en la línea, el navegador corta la palabra en el 
lugar donde se encuentra la etiqueta. 


Al igual que la etiqueta anterior, es una etiqueta denominada “vacía”, por tanto no 
tiene ni contenido, ni etiqueta de cierre. 


La sintaxis de la etiqueta es la siguiente 

<p>En este párrafo la palabra Super<wbr>Fragilistico<wbr>Espialidoso es muy 
amplia</p> 


El siguiente ejemplo muestra el uso de las etiquetas en un documento web. 
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<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>AI contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente 
texto aleatorio <br>Tiene sus raíces en una pieza clásica de la literatura del Latín, que 
data del año 45 antes de Cristo, haciendo que este adquiera más de 2000 años de 
antigüedad <bp Richard McCIintock, un profesor de Latín de la Universidad de<mark> 
Hampden<wbr>-Sydney</mark> en Virginia, encontró una de las palabras más oscuras 
de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo 
distintos textos del latín, descubrió la fuente indudable. </p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra a 
continuación. 
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x 


2 Ejercicios prácticos HTML X 

\ - 

<- c Q localhost/ejerc¡c¡oshtml5/code.html ^ 2 

Aplicaciones Cü aprendoencasa.com CU Otros marcadores 

Al contrario del pensamiento popular, el texto de Lorem Ipsum no es 
simplemente texto aleatorio. 

Tiene sus raices en una pieza clásica de la literatura del Latín, que data del año 
45 antes de Cristo, haciendo que este adquiera mas de 2000 años de 
antiguedad. 

Richard McClintock, un profesor de Latín de la Universidad de Hampden- 
Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del 
latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos 
textos del latín, descubrió la fuente indudable. 



Etiqueta <INS> 


La etiqueta < ins >, permite definir que un texto ha sido actualizado o insertado en 
el documento web. La representación visual en el navegador suele ser la de texto 
subrayado. 

La sintaxis de la etiqueta con sus atributos posibles es la siguiente: 

<p>EI <ins cite-'URLr"datetime-'YYYY-MM-DDThh:mm:ssTZD">texto</ins> se ha 
insertado</p> 


Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes: 

cite 


Este atributo permite establecer la URL en la que se encuentra el documento 
en el cual se explican los razonamientos de la inserción de texto realizada. Se puede 
especificar una dirección relativa o absoluta. Aunque visualmente no tiene ningún 
efecto en el navegador. 

datetime 

El atributo permite establecer la fecha y hora en la cual se ha realizado la 
inserción de texto en el documento web. La siguiente tabla muestra el formato y 
valores que se han de asignar al atributo. No tiene efectos visuales en el navegador. 
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Formato_Descripción 


datetime=’YYYY-MM- 

Los formatos que se aplican 

son los siguientes: 

DDThh:mm:ssTZD” 

Formato 

Explicación 

Ejemplo 


YYYY 

Año 

2013 


MM 

Mes 

10 


DD 

Día 

16 


T 

Separador 

T 


hh 

Hora 

10 


mm 

Minutos 

39 


ss 

Segundos 

00 


TZD 

Zona Horaria 

Z 


El siguiente ejemplo muestra el uso de la etiqueta con sus atributos. 


<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>EI trozo de texto estándar de Lorem Ipsum usado desde el año 1500 es reproducido 
debajo para aquellos interesados. Las secciones 1.10.32y 1.10.33 de "de Finibus 
Bonorum et Malorum" por Cicero son también reproducidas en su forma original 
exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 <ins 
cite="http://www.aprendoencasa.com" datetime="2013-10-16T10:43:00Z"> por H. 
Rackham </¡ns></p> 

</body> 

</htm!> 
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El resultado del ejercicio anterior en el navegador ha de ser similar al que se 
muestra en la imagen siguiente: 


X 


Ejercicios prácticos HTML x 

<- c D localhost/ejerc¡doshtml5/code.html < £j > T 2 

Aplicaciones Q aprendoencasa.com CD Otros marcadores 

El trozo de texto estándar de Lorem Ipsum usado desde el año 1500 es reproducido 
debajo para aquellos interesados. Las secciones 1.10.32 y 1.10.33 de "de Finibus 
Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, 
acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham. 


Etiqueta <DEL> 


La etiqueta < del >, permite definir texto que se ha marcado como borrado en una 
fecha determinada, la visualización del efecto en el navegador, es la de texto tachado. 

La sintaxis de la etiqueta con sus atributos posibles es la siguiente: 

<p>EI <del cite-'URLr" datetime=" YYYY-MM-DDThh:mm:ssTZD">texto</ins> se ha 
borrado</p> 

Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes: 

cite 


Este atributo permite establecer la URL en la que se encuentra el 
documento, en el cual se explican los razonamientos del borrado de texto realizado. 
Se puede especificar una dirección relativa o absoluta. Aunque visualmente no tiene 
ningún efecto en el navegador. 

datetime 

El atributo permite establecer la fecha y hora en la cual se ha realizado la 
eliminación del texto en el documento web. 

El siguiente ejercicio muestra el uso de la etiqueta. 
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<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>Visítanos en <del cite="http://www.aprendoencasa.com" datetime="2013-10- 
16T10:43:00Z">www.aprendoencasa.es</del></p> 

<p>Perdón en <ins cite="http://www.aprendoencasa.com" datetime="2013-10- 
16T10:43:00Z">www.aprendoencasa.com</ins></p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la siguiente 
imagen: 


X 


a Ejercicios prácticos HTML x 


f - 

4- G D localhost/ejerc¡c¡oshtml5/code.html 

III 

■■■ Aplicaciones Q aprendoencasa.com 

CU Otros marcadores 

Visítanos en www-apr endo eneas a es 


Perdón en www .aprendoencasa.com 
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Etiqueta <ABBR> 



La etiqueta <abbr>, permite definir texto indicando que es una abreviatura o 
acrónimo, como pueden ser “WWW” o “NASA”. 

El marcado de texto con esta etiqueta permite proporcionar información a los 
navegadores, correctores ortográficos, sistemas de traducción y motores de búsqueda. 

El efecto visual en la mayoría de los navegadores, es que al mover el puntero del 
ratón por encima de la abreviatura, se visualiza un pequeño letrero con la información 
proporcionada por el atributo “title” de la etiqueta. 

La sintaxis de la etiqueta es la siguiente: 

<p>La siguiente <abbr title-'Descripción Abreviatura">Palabra</abbr> es una 
abreviatura</p> 

La etiqueta utiliza el atributo global “title”, en el cual se ha de especificar la 
descripción del acrónimo o abreviatura, para esta etiqueta. 

El siguiente ejemplo muestra el uso de la etiqueta. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-’utf-8"> 

<meta name-'author" content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-'Ejercicios prácticos HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>La siguiente palabra <abbr title-'Objeto Volante No ldentificado">OVNI</abbr> es 
una abreviatura</p> 

</body> 

</html> 

El ejercicio anterior ha de tener un resultado similar al que se muestra a 
continuación. 
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- ~ 1 

3 Ejercicios prácticos HTMi x 


4- c D localhost/ejerc¡cioshtml5/code.html 

☆| ¥ = 1 

■■■ Aplicaciones C] aprendoencasa.com 

r~l Otros marcadores 

La siguiente palabra C 1 - --- - . 

Objeto Volante No Identificado 



Etiqueta <ADDRESS> 


La etiqueta <address>, permite definir la información de contacto del autor o 
propietario del documento o artículo. 

Si la etiqueta se encuentra dentro del cuerpo “body” del documento, representa la 
información de contacto del documento completo, mientras que si la etiqueta se 
encuentra dentro de un artículo “article”, representa la información de contacto del autor 
del artículo. 

Los navegadores suelen visualizar la información de contacto en letra cursiva y la 
mayoría de navegadores insertan también un salto de línea antes y después de la etiqueta. 

No se debe de utilizar la misma para indicar un código postal a menos que este 
último forme parte de la información de contacto, y usualmente se suele ubicar la etiqueta 
de dirección dentro de otra denominada “footer”. 

La sintaxis de la etiqueta es la siguiente: 

<address> 

Escrito por <a href= mailto:nacho.elx@gmail.com >losé Sáez</a> <br> 

Visítenos en: <br> 
www.aprendoencasa.com<br> 

C/ SinSentido, 44,03202<br> 

Spain<br> 

</address> 


El siguiente ejercicio muestra el uso de la etiqueta. 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 

















Curso de introducción al diseño Web - www.aprendoencasa.com 


79 



<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" content-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

</head> 

<body> 

<p>lnformación de contacto.. </p> 

<footer> 

<address> 

Escrito por <a href=mailto:nacho.elx@gmail.com>José Sáez</a>. <br> 
Visítenos en: <br> 
www.aprendoencasa.com<bp 
C/ SinSentido, 44,03202<br> 

Spain<br> 

</address> 

</footer> 

</body> 

</html> 

El resultado del ejercicio ha de ser similar al que se muestra a continuación. 
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Etiqueta <BDO> 


La etiqueta <bdo>, permite definir la dirección de visualización del texto 
contenido en la misma. 


La sintaxis de la etiqueta con sus atributos posibles es la siguiente: 

<p>EI siguiente <bdo dir="Valor">Texto</bdo> tiene cambiada su dirección de 
visualización</p> 

Los atributos a destacar de la etiqueta son los siguientes: 

dir 


Permite especificar la dirección de visualización del texto. Tiene como 
valores rtl (right to left) derecha a izquierda, y Itr (left to right) izquierda a derecha. 

El siguiente ejemplo muestra el uso de la etiqueta. 


<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" contení-'aprendoencasa.com"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>Opciones sobre el texto.. </p> 

<p>EI siguiente <bdo dir="ltr">Texto</bdo> está escrito de izquierda a derecha</p> 
<p>EI siguiente <bdo dir="rtl">Texto</bdo> está escrito de derecha a izquierda</p> 

</body> 

</html> 
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El resultado del ejercicio anterior en el navegador ha de ser similar al siguiente: 


X 


2 Ejercicios prácticos HTML X 


<- C D localhost/ejerc¡c¡oshtml5/code.html 

☆ | ¥ = 1 

■I! Aplicaciones Cü aprendoencasa.com 

n Otros marcadores 

Información de contacto... 


El siguiente Texto esta escrito de izquierda a derecha 


El siguiente otxeT esta escrito de derecha a izquierda 



Etiqueta <DFN> 


La etiqueta <dfh>, se utiliza para realizar la definición de un término. El efecto 
visual en el navegador es el de fuente cursiva, pero su significado semántico no es el 
mismo. 

La sintaxis de la etiqueta es la siguiente: 

<dfn>Texto Definición del Termino</dfn> 

El siguiente ejercicio muestra el uso de la etiqueta en un documento web. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-'Ejercicios prácticos HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p><abbr title="Basic Input Output System">BIOS</abbr></p> 
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<dfn>Sistema Básico de Entrada y Salida en un Sistema lnformático</dfn> 

</body> 

</html> 


El resultado del ejercicio anterior en el navegador ha de ser similar al que se 
muestra a continuación. 



Etiqueta <PRE> 


La etiqueta <pre>, permite definir lo que se denomina texto con formato o 
preformateado. 

Como se ha comentado anteriormente el navegador no respeta los saltos de línea y 
espacios en blanco sobrantes en un documento web. 

Al insertar en el contenido de esta etiqueta un texto, el mismo se visualiza 
normalmente con una fuente de letra de ancho fijo, normalmente suele ser el tipo de letra 
Courier. 

El utilizar esta fuente hace que los espacios en blanco y saltos de línea, que se 
inserten como contenido de la etiqueta sean respetados y por tanto, el texto se ha de 
visualizar en el navegador tal como se ha escrito. 

La sintaxis de la etiqueta es la siguiente: 

<pre>EI texto escrito aquí esta preformateado</pre> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 


<!DOCTYPE HTML> 
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<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>EI ejemplo más usual en los lenguajes de programación</p> 

<pre> 

#¡nclude&lt;stdio.h&gt;; 
int main(void) { 

printffHola Mundo, Aprendoencasa.com"); 
return 0; 

} 

</pre> 

</body> 

</htmi> 


El resultado del ejercicio anterior en el navegador ha de ser similar al que se 
muestra a continuación. 


X 


¿] Ejercicios prácticos HTML x 


C Ll localhostyejerác¡oshtml5/code.html 

i^r 

III 

I;; Aplicaciones C] aprendoencasa.com 

f~l Otros marcadores 

El ejemplo más usual en los lenguajes de programación 


#include <stdio.h>; 
int main(void) { 

printf("Hola Mundo, Aprer.doencasa. com") ; 
return 0; 

} 
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Etiqueta <Q> 


La etiqueta <q>, se utiliza para insertar un texto acotado entre comillas dobles. 
La sintaxis de la etiqueta es la siguiente: 

<p>EI siguiente <q>Texto</q> esta resaltado entre comillas </p> 

El ejercicio siguiente muestra el uso de la etiqueta en un documento web. 

<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

</head> 

<body> 

<p>Lo más importante que aprendí a hacer después de los cuarenta años fue a 
<q>decir no</q> cuando es <q>no</q>. <cite>Gabriel García Márquez</cite></p> 
<p>Gracias por visitar <q>aprendoencasa.com</q></p> 

</body> 

</html> 

El resultado del ejercicio anterior ha de ser similar al que se muestra a 
continuación. 


_ □ 


& Ejercicios prácticos HTML x 

<- G D localhost/ejerc¡cioshtml5/code.html ^ T = 

Aplicaciones CU aprendoencasa.com Q Otros marcadores 

Lo más importante que aprendí a hacer después de los cuarenta años fue a "decir no" 
cuando es "no". Gabriel García Márquez 

Gracias por visitar "aprendoencasa.com" 
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Etiqueta <BLOCKQUOTE> 



La etiqueta <blockquote>, permite realizar la inserción de un texto, el cual 
visualmente en el navegador se realiza sangría a la izquierda sobre el mismo, mientras que 
semánticamente se puede utilizar para realizar una distinción sobre un texto al que se 
quiere hacer referencia. 

Por cada etiqueta <blockquote>, anidadas una dentro de la otra, se realiza un 
nuevo sangrado sobre el texto insertado en el documento. 

La sintaxis de la etiqueta es la siguiente. 

<blockquote cite="URL">Texto al que referenciar y sangrar</blockquote> 

Los atributos de la etiqueta son los siguientes: 

cite 


El atributo permite especificar como valor, una URL o dirección de internet, 
de la cual se ha extraído, consultado o simplemente se quiere referenciar al texto 
insertado en el documento. La URL, puede ser absoluta o relativa. 

El siguiente ejemplo muestra el uso de la etiqueta en el documento web. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author 1 ' contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-'Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p>Frases celebres</p> 

<blockquotecite="http://www.aprendoencasa.com"> 

<p>Me lo contaron y lo olvidé; lo vi y lo entendí; lo hice y lo aprendí. 
<cite>Confucio</cite></p> 
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</blockquote> 

<blockquote> 

<blockquote cite="http://www.aprendoencasa.com"> 

<p>Yo no enseño a mis alumnos, solo les proporciono las condiciones en las que 
puedan aprender. <cite>Albert Einstein </cite></p> 

</blockquote> 

</blockquote> 

</body> 

</html> 


El resultado del ejercicio anterior en el navegador ha de ser similar al que se 
muestra a continuación. 



Etiqueta <BDI> 


La etiqueta <bdi>, permite definir lo que se denomina aislamiento bidireccional, 
es decir permite insertar un texto contenido en otra etiqueta para ser escrito en otra 
dirección, como por ejemplo derecha a izquierda. Se utiliza normalmente cuando se 
desconoce la direccionalidad del texto insertado. 

La sintaxis de la etiqueta es la siguiente. 

<p>Texto normal, <bdi>Texto Otra Dirección</bdi>, Texto normal</p> 
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El siguiente ejercicio hace uso de la etiqueta en un documento web. 



<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-’author" content="José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-'Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p><bdi>Juan</bdi>: 3 Visitas 1 Click</p> 

<p><bdi> -• l jj </bdi>: 2 Visitas</p> 

<p><bdi>Pedro</bdi>: 6 Visitas</p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra a 
continuación. 


X 


B Ejercicios prácticos HTML x 


G Q localhost/ejerc¡c¡oshtml5/code.html 

<4f.. 

III 

Aplicaciones CD aprendoencasa.com 

n Otros marcadores 

Juan: 3 Visitas 1 CHck 


Wj : 2 Visitas 


Pedro: 6 Visitas 
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Etiqueta <RUBY>, <RT>, <RP> 


La finalidad de la etiqueta <ruby> , es la de crear anotaciones en formato ruby, 
que se utilizan para la tipografía de Asia Oriental, permitiendo mostrar la pronunciación de 
los caracteres del este asiático. 

La etiqueta se utiliza en conjunto con otras dos etiquetas <rt> y <rp>, la 
primera permite realizar la explicación o pronunciación del texto, mientras que la segunda 
permite visualizar un texto en los navegadores que no soporten la primera característica. 

La sintaxis de la etiqueta es la siguiente: 

<p>EI <ruby> Texto <rp>Pronunciación</rp><rt> Texto Alternativo</rt></ruby></p> 

El siguiente ejemplo muestra el uso de la etiqueta. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name="generator" content="Ejercicios prácticos HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Las siguientes siglas significan 

<ruby> PC <rp>(</rp><rt>Orange Juice</rt><rp>)</rp></ruby> 

</p> 

</body> 

</html> 


El resultado en el navegador del ejercicio anterior ha de ser similar al que se 
muestra a continuación. 
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Etiqueta <DIALOG> 


La finalidad de la etiqueta < dialog >, es la de semánticamente representar un 
dialogo, como si se tratara de representar una conversación de chat, o un dialogo entre 
programa y usuario. 

También se utiliza para abrir un cuadro de dialogo en la ventana del navegador la 
cual muestre información al realizar un clic sobre un elemento del documento, aunque 
para que funcione esta característica, se han de habilitar ciertas opciones avanzadas del 
navegador. 

Por eso y debido a que todavía no es soportada por la mayoría de navegadores solo 
se explicara la misma desde el punto de vista semántico. 

El único atributo disponible de la etiqueta, es open, el cual hace que se visualice el 
contenido del dialogo al cargar el documento web. 

La sintaxis de la etiqueta es la siguiente. 

<dialog open>Contenido de texto del dialogo</dialog> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 


















90 www.aprendoencasa.com 



Curso de introducción al diseño Web 


<meta name-'generator" content-k/wwv.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Realice aquí sus preguntas para que puedan ser contestadas.. </p> 
<dialogopen> 

<ul> 

<li>Hola, en que puedo ayudarle. </l¡> 

<li>- Necesito información sobre html5</li> 

<li>puede consultar la siguiente página web www.aprendoencasa.com</li> 
<li>-Gracias por su ayuda.,.</li> 

</ul> 

</dialog> 

</body> 

</html> 


El resultado del ejercicio anterior en el navegador ha de ser similar al que se 
muestra en la siguiente imagen. 


_ □ 


☆ ¥ = 

n Otros marcadores 

Realice aquí sus preguntas para que puedan ser contestadas... 

• Hola, en que puedo ayudarle.. 

• - Necesito información sobre html5 

• puede consultar la siguiente pagina web www.aprendoencasa.com 

• - Gracias por su ayuda... 


& Ejercicios prácticos HTML x 

<- - Qt Q localhost/ejercicioshtml5/clase.htrnl 

"■ Aplicaciones Cj aprendoencasa.com Q] Nueva carpeta 
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Ejercicios 3 


I o Realizar el documento web, mostrado en la imagen siguiente, intentando que se 
asemeje lo más posible al resultado mostrado. Escribe el código utilizado. (Los textos 
puedes extraerlos de la Wikipedia.) 



Archivo Edición Ver Marcadores Widgets Titulares Herramientas A^uda 


La exploración espacial 


La exploración espacial designa los esfuerzos del hombre en estudiar el espacio y 
sus astros desde el punto de vista científico y de su explotación económica. Estos 
esfuerzos pueden involucrar tanto seres humanos viajando en naves espaciales como 
satélites con recursos de telemetría o sondas teleguiadas enviadas a otros planetas 
(orbitando o aterrizando en la superficie de estos cuerpos celestes). 

Las personas que pilotan naves espaciales, o son pasajeros en ellas, se llaman 
astronautas (en Rusia; cosmonautas ; en China: taikonautas). Técnicamente se 
considera astronauta a todo aquel que emprenda un vuelo sub-orbital (sin entrar en 
órbita) u orbital a como minimo 100 km de altitud (considerado el limite externo de la 
atmósfera). 

El cielo siempre ha atraído la atención y los sueños del hombre. Ya en 1634 se publicó 
la que se considera primera novela de ciencia ficción, Somnium., de Johannes 
Kepler. que narra un hipotético viaje a la Luna. Más tarde, en 1865, en una famosa 
obra de ficción titulada "De la Teme á la Lime", Julio Yerne escribe sobre un grupo 
de hombres que viajó hasta la Luna usando un gigantesco cañón. 

En Francia, Georges Méliés, uno de los pioneros del cine, tomaba la novela de 
Veme para crear "Le voy age dans ¡a Lune" (1902), una de las primeras películas de 
ciencia ficción en la que describía un increíble viaje a la Luna. En obras como "The 
JJ'ar of the Worlds" (1898) y "The First Men in The Moon " (1901), Herbert 
George Wells también se concibieron ideas de exploración del espacio y de contacto 
con civilizaciones extraterrestres. 


Utiliza este espacio para escribir tus respuestas. 
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2 o Realizar el documento web, mostrado en la imagen siguiente, intentando que se 
asemeje lo más posible al resultado mostrado. Escribe el código utilizado. (Los textos 
puedes extraerlos de la Wikipedia.) 


El Ártico ha perdido el 14% de su hielo marino perenne en un solo año - 


^ " n 1 x 


Archivo Editar Ver Marcadores WRJgets Herramientas Ayuda 

El Ártico ha perdido el 14% de su hielo marino 
perenne en un solo año 

WASHINGTON.- El hielo perenne del Ártico se redujo en un 14% durante el 
último año, al perder 720.000 kilómetros cuadrados, una superficie superior a la 
Península Ibérica, según datos de la NASA. 

Según el JPL, la pérdida del hielo perenne, que debiera mantenerse durante todo el 
• verano, fue todavía mayor y se acercó a un 50% en el momento en que ese hielo se 
desplazaba desde el Ártico oriental hacia el oeste. 

Son Nghiem, investigador del JPL ha declarado que: 

"Los cambios registrados en esos años en el hielo ártico son rápidos y 
espectaculares. De mantenerse la situación, ésta tendrá un impacto 
profundo en el ambiente, así como en el transporte marino y el 
comercio." 


Utiliza este espacio para escribir tus respuestas 
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Atributos en HTML5 



Las etiquetas del lenguaje HTML5, permiten definir un documento web, pero 
también muchas de ellas tienen una serie de atributos u “opciones”, dependiendo del tipo 
de etiqueta que se inserte. 

Los atributos permiten especificar en la mayoría de ocasiones el correcto 
funcionamiento de la etiqueta, supongamos un enlace a documento, para realizar este 
enlace se emplea la etiqueta “<a>”, pero si no se empleara un atributo para especificar 
donde apunta dicho enlace, la etiqueta por sí solo no serviría de nada. 

A la hora de utilizar los atributos el W3C recomienda que los valores que se asignan 
a los mismos, se especifiquen entre comillas dobles (“valor”). 

También como pequeña recomendación, aunque tanto los atributos como los 
valores, se permiten especificarlos en mayúsculas o minúsculas indiferentemente, se 
recomienda especificar los mismos en letras minúsculas, de esta forma si aparecieran 
nuevas versiones de (X)HTML, se cumpliría directamente con el estándar. 

Con esta última versión del lenguaje HTML5, se podrían establecer dos tipos de 
atributos, los globales que todas las etiquetas tienen y pueden utilizar, y los específicos de 
cada etiqueta, que dependiendo de la misma tendrá más o menos atributos. 


Atributos Globales 

Los atributos globales se pueden aplicar a todas las etiquetas del lenguaje HTML5, 
permitiendo dar sentido y significado a las mismas dentro del contexto en el que se 
apliquen. 

Entre los atributos que se pueden utilizar encontramos los siguientes 

accesskey 

El atributo permite especificar un acceso directo para establecer el foco o 
activar el elemento sobre el que se aplica. 

Sintaxis del atributo es la siguiente: 

<Et¡ q ueta a ccesskey-'Ca rá de r"> 

Como valor del atributo se ha de especificar el carácter que se quiere utilizar 
como acceso directo al elemento. 
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El siguiente ejemplo muestra el uso del atributo en un documento web. 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-’author" content="José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-'Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p accesskey- 'a">Lorem Ipsum es simplemente el texto de relleno de las imprentas y 
archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias 
desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) 
desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un 
libro de textos espécimen. No sólo sobrevivió 500 años, sino que también ingresó como 
texto de relleno en documentos electrónicos, quedando esencialmente igual al original. 

</p> 

<p accesskey-'b"> 

Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenían 
pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por 
ejemplo Aldus PageMaker, el cual Incluye versiones de Lorem Ipsum </p> 

<p><a accesskey- ’c" href-'#">Enlace</a></p> 

</body> 

</html> 


El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 
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B Ejercicios prácticos HTML x 

<- ^ G | D localhost/ejercicioshtml5/code.html# 'í? ^ = 

Aplicaciones CU aprendoencasa.com Cll Otros marcadores 

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el 
texto de relleno estándar de las industrias desde el año 1500. cuando un impresor (N. del T. persona que se 
dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un 
libro de textos espécimen. No sólo sobrevivió 500 años, sino que también ingresó como texto de relleno en 
documentos electrónicos, quedando esencialmente igual al original. 

Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem 
Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye 
versiones de Lorem Ipsum. 

Enlace 


class 


El atributo permite especificar un nombre o varios de clase 6 , para el 
elemento web sobre el cual se aplica el atributo. 

La sintaxis del atributo es la siguiente: 

<p class="NombreClase">Texto de párrafo</p> 

El siguiente ejemplo muestra el uso del atributo en un documento web. 

<html> 

<head> 

<style type="text/css"> 

hl. introducción {colonblue;} 
p.importante {colongreen;} 
p.destacado { color: red;} 

</style> 

</head> 

<body> 

<h1 class="¡ntroduccion">Atr¡buto Class</h1> 

<p>Este párrafo no tiene aplicado atributos de clase.</p> 


6 Una clase es una estructura de formato que se aplica a un elemento o varios de un documento web, estando construida la 
misma mediante el lenguaje de hojas de estilo, CSS. 
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<p class="importante">Este párrafo tiene aplicado un atributo de clase. :)</p> 
<p class="destacado">gracias por visitar www.aprendoencasa.com</p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación 
en la imagen. 


B localhost/ejercicioshtmlS X 


G D localhostyejerc¡c¡oshtml5/clase.html 

III 

■■■ Aplicaciones CU aprendoencasa.com 

P~l Otros marcadores 

Atributo Class 


Este párrafo no tiene aplicado atributos de clase. 


Este párrafo tiene aplicado un atributo de clase. :) 


gracias por \isitar www.aprendoencasa.com 



contenteditable 

Es un nuevo atributo en esta versión de E1TML5, el cual permite editar en 
línea el elemento sobre el cual se aplica. 

Obviamente se suele aplicar sobre elementos que visualizan información en 
modo texto, párrafos, áreas de texto, etc. 

El atributo puede tener cuatro valores, ninguno verdadero (“true”), 
siendo estos últimos de resultados idénticos, es decir da igual aplicar ninguno que 
verdadero, también dispone de falso (“false”), y por ultimo heredado (“inherit”), 
que recogerá el valor del elemento padre. 

La sintaxis del atributo es la siguiente: 

<p contenteditable-'valor">Texto del párrafo</p> 


El siguiente ejemplo muestra el uso del atributo en un documento web. 
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<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" content-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Ejercicios prácticos HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p contenteditable-'false">Este párrafo no se puede editar </p> 

<p contenteditable-'">Este párrafo si se puede editar </p> 

<p contented ita ble="true">Otro párrafo editable.</p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente 
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data-* 


El atributo data-*, se utiliza para almacenar datos privados que pueda 
utilizar el documento u aplicación web. 

Este tipo de atributo permite la posibilidad de insertar datos personalizados 
en cualquiera de los elementos E1TML del documento web. 

Este tipo de dato, luego pueden ser utilizados por lenguajes como 
javascript, para interactuar con el usuario en el documento web que se visualiza. 

Los nombres de atributos de datos especificados de esta forma se han de 
teclear en letras minúsculas. 

La sintaxis del atributo es la siguiente: 

<p data-nombre-dato-'valor dato">Texto del párrafo</p> 

El siguiente ejemplo muestra el uso del atributo en un documento web utilizando 
un elemento E1TML tipo lista. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-’utf-8"> 

<meta name-'author" contení-José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení-'Curso práctico HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<ul> 

<l¡ data-tipo-curso="web">Curso práctico HTML5</li> 

<l¡ data-tipo-curso-'ofimática">Curso práctico Word</li> 

<l¡ data-tipo-curso="internet">Curso práctico Outlook</li> 

</ul> 

</body> 

</html> 
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El resultado del ejercicio anterior en el navegador ha de ser similar al que se 
muestra a continuación. 



dir 


El atributo dir, permite especificar la dirección del texto contenido dentro 
de un elemento HTML. 

La sintaxis del atributo en un elemento html es la siguiente: 

<p><strongdir="valor">Texto del párrafo</strong></p> 

Los posibles valores del atributo son: Itr, que especifica que el texto sea 
escrito de izquierda a derecha, rtl, que indica que el texto sea escrito de derecha a 
izquierda, y por último auto, que deja al navegador la elección de la dirección del 
texto, basándose en el contenido del elemento. 

El siguiente ejemplo muestra el uso del atributo en un documento web. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení-'Curso práctico HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 
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<p dir="ltr">Este Texto es de izquierda a derecha </p> 
<p dir="rtl">Este Texto es de derecha a izquierda </p> 
<p dir="auto">Este Texto es automático.</p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente. 



draggable 


El atributo draggable , permite especificar si el elemento sobre el cual se 
aplica el atributo es un elemento, sobre el cual se puede aplicar la acción de 
arrastrar y soltar (“drag and drop”). 

Como es lógico para producir efectos sobre la visualización del documento 
en el navegador este atributo se suele programar en conjunto con lenguajes de 
programación del cliente, como JavaScript. 

Los valores posibles para el atributo son: true, que especifica que el 
elemento se puede arrastrar, false, indica que no se puede arrastrar el elemento y 
por último auto , indicando que se deja al navegador la elección de posibilidad de 
arrastrar o no el elemento. 

La sintaxis del atributo aplicada a un elemento E1TML, es la siguiente. 

<p d ra gga b I e="va I o r">T exto del párrafo</p> 
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El siguiente ejemplo muestra la aplicación del atributo a elementos de un 
documento web, aunque no proporciona interactividad ya que no tiene asociada 
programación en JavaScript. 


<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" content-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Curso práctico HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p draggable-'true">Este Texto se puede arrastrar.</p> 

<p draggable-'false">Este Texto no se puede arrastrar.</p> 

<p draggable="auto">Este Texto es automático.</p> 

</body> 

</html> 


El resultado del ejercicio anterior en el navegador ha de ser similar al que se 
muestra en la imagen siguiente. 


2 Ejercicios prácticos HTM x 



C Q localhost/ejercicioshtml5/dase.html fe = 

Aplicaciones CU aprendcencasa.com CD Otros marcadores 


Este Texto se puede arrastrar. 
Este Texto no se puede arrastrar 
Este Texto es automático. 


Est? Texto se txnede 
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hidden 


El atributo hidden , permite especificar que un elemento o bien ya no existe, 
o no es relevante. Es un atributo booleano, es decir no dispone de valores los cuales 
aplicar al atributo. Si aparece en un elemento significa que está activado el atributo y 
el elemento no será mostrado en el navegador. 

La sintaxis del atributo sobre un elemento HTML es la siguiente. 

<p hidden>Texto del párrafo</p> 

El siguiente ejemplo muestra el uso del atributo sobre varios elementos. 

<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</t¡tle> 

<meta charset-'utf-8"> 

<meta name-'generator" contení-'Curso práctico HTML5"> 

<meta ñame-’keywords" contení-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p hidden>Este párrafo no se visualizara </p> 

<p>Este párrafo esvisible.</p> 

<p><b>Nota:</b> El atributo hidden no es soportado por IE </p> 

</body> 

</html> 

El ejercicio anterior ha de mostrar un resultado similar al siguiente. 


X 


Ejercicios prácticos HTML X 


4- C D localhost/ejerc¡c¡oshtml5/clase.html 

☆ |^=| 

■■■ Aplicaciones C] aprendoencasa.com 

n Otros marcadores 

Este párrafo es visible. 


Nota: El atributo hidden no es soportado por IE. 
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El atributo id , permite especificar un identificador único para cada uno de 
los elementos de un documento web. El identificador ha de tener como mínimo un 
carácter, no puede contener espacios en blanco y no realiza diferenciación entre 
mayúsculas y minúsculas. 

Normalmente este atributo es usado para aplicar estilos sobre un elemento 
o interactuar con el mismo mediante lenguajes de guión. 

La sintaxis del atributo es la siguiente. 

<p id="ldentif¡cador">Texto del párrafo</p> 

El siguiente ejemplo muestra la utilización del atributo en un documento web. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení-'Curso práctico HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p id="uno">Párrafo con identificador asignado.</p> 

<p id="p_dos">Párrafo con <strong id="palabra">identificador</strong> asignado </p> 

</body> 

</htm!> 

El resultado del ejercicio anterior ha de ser similar al que se muestra en la siguiente 
imagen. 


□ 1 

h] Ejercicios prácticos HTML x 

C D localhost/ejercic¡oshtml5/clase.html 

III 

■■■ Aplicaciones Cü aprendoencasa.com Q Nueva carpeta 

r~l Otros marcadores 

Párrafo con identificador asignado. 

A 

Párrafo con identificador asignado. 
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lang 

El atributo lang, permite especificar el lenguaje en el que está redactado el 
contenido de texto del elemento HTML sobre el cual se aplica el atributo. 

La sintaxis del atributo es la siguiente. 

<Etiqueta lang-'Código lenguaje">Texto del elemento</Etiqueta> 

El código de lenguaje que se quiere aplicar, se puede consultar en la 
siguiente dirección web. 

http://www.w3schools.com/tags/ref_language_codes.asp 

El siguiente ejemplo muestra el uso del atributo en un documento web. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="Curso práctico HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<p lang-'en">l will check the website www.aprendoencasa.com</p> 

<p lang="fr">Je vais consulter le site Web www.aprendoencasa.com</p> 

<p lang-'es">voy a consultar la página web www.aprendoencasa.com</p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la siguiente 
imagen. 
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x 


3 Ejercicios prácticos HTML X 


c D localhost/ejerc¡cioshtml5/clase.html 

III 

J^* 

& 

U Aplicaciones CD aprendoencasa.com CU Nueva carpeta 

P~l Otros marcadores 

I will check the website www apr endoenc as a. c om 


Je vais consulter le site Web www.aprendoencasacom 


voy a consultar la pagina web www aprendo encasa.c om 



spellcheck 

El atributo spellcheck, permite que se realice por parte del navegador la 
corrección ortográfica del contenido, que tenga el elemento sobre el cual se aplica. 

Normalmente se suele aplicar sobre elementos de tipo texto de entrada 
(“input”), que no sean contraseñas, sobre elementos de tipo área de texto 
(“textarea”) y en elementos de texto editables, es decir que dispongan del atributo 
contenteditahle activado. 

Se puede aplicar solo dos posibles valores. True (“verdadero”), con lo que 
se activa la corrección y False (“Falso”) desactivando la posible corrección del 
elemento. 

La sintaxis del atributo es la siguiente. 

<Etiqueta spellcheck-'valor">Contenido del elemento</Etiqueta> 

El siguiente ejemplo muestra el uso del atributo es un documento web. 

<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení-'Curso práctico HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 
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<body> 

<p spellcheck-’true" contenteditable="true">Este párrafo tiene la activación de 
corrección ortográfica activada </p> 

<p spellcheck="false">Este párrafo no tiene activada la corrección ortografica</p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la siguiente 
imagen. 


X 


3 Ejercicios prácticos HTML X 


4- C D localhost/ejerc¡c¡oshtml5/clase.html 

☆ M# = 1 

Aplicaciones C] aprendoencasa.com C] Nueva carpeta 

n Otros marcadores 

Este párrafo tiene la activación de corrección ortográfica activada 


Este párrafo no tiene activada la corrección ortográfica 



style 

El atributo style, permite especificar un estilo CSS, asociado al elemento 
sobre el cual se aplica, para cambiar su formato de presentación. 

El estilo que se aplica es global, es decir tiene preferencia sobre cualquier 
otro estilo aplicado mediante etiquetas style, u hojas de estilo externas al 
documento. 

La sintaxis del atributo es la siguiente. 


<Etiqueta style-'Reglas CSS">Contenido del elemento</Etiqueta> 
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El siguiente ejemplo muestra el uso del atributo en varios elementos de un 
documento web. 


<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content-Vvww.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p style=" color: red; ">EI párrafo tiene un estilo de color asociado.</p> 

<p style=" font-size: 2em; ">EI párrafo tiene un estilo de fuente asociado </p> 
<pstyle=" color: blue; font-size: 1.4em">Gracias por visitar 
www.aprendoencasa.com</p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación 
en la imagen. 
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tabindex 

El atributo tabindex , se utiliza para establecer el orden de tabulación en el 
documento web, cuando se utiliza la tecla de tabulador para recorrer el mismo. 

El orden de tabulación establece de qué forma el cursor se sitúa en los 
diferentes elementos del documento cuando se va pulsando la tecla de tabulación. 

La sintaxis del atributo es la siguiente. 


<Etiqueta tabindex-'Valor Numérico">Contenido del elemento</Etiqueta> 


El siguiente ejemplo muestra el uso del atributo en un documento web. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Enlace al buscador <a href="http://www.google.es" tabindex="1 ">Google</a></p> 
<p>Enlace al buscador <a href="http://www.bing.es" tabindex="2">Bing</a></p> 
<p>Enlace a <a href- 'http://www.aprendoencasa.com 1 ' tabindex="3">Aprendo en 
casa</a></p> 

</body> 

</html> 
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El resultado del ejercicio anterior ha de ser similar al que se muestra en la siguiente 
imagen. 



_ □ | 

¿] Ejercicios prácticos HTML x 


^ Ct D localhost/ejerc¡cioshtml5/clase.html 

O 

III 

" Aplicaciones CD aprendoencasa.com Q] Nueva carpeta 

n Otros marcadores 

Enlace al buscador Goode 


Enlace al buscador Bing 


Enlace a Aorendo en casa 


www.google.es 



title 


El atributo title, permite especificar información adicional sobre el elemento 
que se aplica. 

Muchos navegadores suelen mostrar una notificación con el valor que se 
haya dado al atributo, situando el puntero del ratón sobre el elemento. 

La sintaxis del atributo es la siguiente. 

<Etiqueta title-Texto Adicional">Contenido del elemento</Etiqueta> 

El siguiente ejemplo muestra el uso del atributo en un documento web. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" contení-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 
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<body> 

<p></p> 

<ptitle-'Párrafo con información adicional">Puedes consultar toda la información que 
necesites en <a href- 'http://wmaprendoencasa.com 1 ' title="Estudios 
Online">Aprendoencasa</a></p> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la siguiente 
imagen. 


¿] Ejercicios prácticos HTM X 


^ ■) G D localhost/ejerc¡cioshtml5/clase.html 


☆ ¥ = 

Aplicaciones CU aprendoencasa.com Gü Nueva carpeta 


n Otros marcadores 

Puedes consultar toda la información aue necesites en Aorendoencasa 



Estudios Online 


www.aprendoencasa.com 




Etiquetas <hl>..<h6> 

Títulos o encabezados en el contenido 

Las siguientes etiquetas permiten la definición de encabezados o títulos dentro del 
documento web. 

La etiqueta se representa mediante las etiquetas <hX> </hX>, siendo X un 
número entre 1 y 6, que establece el nivel del encabezado. 

La presentación visual de los elementos de encabezado, suele ser en letra negrita, y 
dependiendo de su nivel, de 1 a 3 suele ser mayor que la letra base establecida, mientras 
que los niveles de 4 a 6 suele ser de tamaño menor a la letra establecida como base. 

Se utilizan semánticamente para establecer separaciones en el documento web, o 
dar más relevancia a secciones del documento. 

La sintaxis para las etiquetas de encabezado es la siguiente. 

<h1>Contenido de texto del encabezado</h1> 

<h2>Contenido de texto del encabezado</h2> 

<h3>Contenido de texto del encabezado</h3> 
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<h4>Contenido de texto del encabezado</h4> 

<h5>Contenido de texto del encabezado</h5> 

<h6>Contenido de texto del encabezado</h6> 

El siguiente ejemplo muestra el uso de encabezados en el documento web para 
destacar secciones en el mismo. 

<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name="generator" content-'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejerc¡cios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<h1>Titulo de Nivel 1</h1> 

<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de 
texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 
1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido 
usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos 
espécimen. </p> 

<h2>Titulo de Nivel 2</h2> 

<p>No sólo sobrevivió 500 años, sino que también ingresó como texto de relleno en 
documentos electrónicos, quedando esencialmente igual al original </p> 

<h3>Titulo de Nivel 3</h3> 

<p>Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales 
contenían pasajes de Lorem Ipsum, y más recientemente con software de autoedición, 
como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem lpsum.</p> 

</body> 

</html> 

El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente. 
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E) Ejercicios prácticos HTML x 

<- C O localhost/ejercic¡oshtml5/dase.html ‘¿Y ^ = 

■*: Aplicaciones C] aprendoencasa.com CU Nueva carpeta QD Otros marcadores 

Titulo de Nivel 1 

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto Lorem Ipsum ha sido el texto de relleno 
estándar de las industrias desde el año 1500. cuando un impresor (N. delT. persona que se dedica a la imprenta) desconocido 
usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos espécimen. 

Titulo de Nivel 2 

No sólo sobrevivió 500 años, sino que también ingresó como texto de relleno en documentos electrónicos, quedando 
esencialmente igual al original. 

Titulo de Nivel 3 

Fue popularizado en los 60s con la creación de las hojas "Letraset”, las cuales contenían pasajes de Lorem Ipsum, y más 
recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum. 


Etiqueta <IMG> 


La etiqueta <img> , permite definir una imagen en el documento web. 
Técnicamente la imagen no es insertada dentro del documento, ya que lo que se hace es 
realizar un enlace a la misma, encargándose el navegador de situarla en el documento. 

Entre los formatos más populares de imagen aceptados, sin duda se encuentran el 
formato JPEG, y el formato PNG. Aunque se pueden utilizar muchos más formatos. 

Se ha de tener en cuenta que el tamaño de las imágenes influye en el proceso de 
carga de la página. Y por tanto se suelen preparar las imágenes para que su “peso” 
(“tamaño en bytes”), sea menor, observando que la imagen obtenga la menor pérdida de 
calidad de visualización en el proceso. 

Se ha de observar que la etiqueta no tiene etiqueta de cierre. 

La sintaxis de la etiqueta es la siguiente. 

<img alt-'valor" height-'valor" width-'valor" src="valor" ismap usemap="valor"> 

Los atributos que pueda utilizar la etiqueta, aparte de los globales, son los 
siguientes. 
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src 


El atributo src, permite especificar el origen de la imagen, es decir su 
ubicación, bien mediante una ruta absoluta o relativa. 

Las posibles formas de sintaxis para definir esta etiqueta con el 
atributo src son las siguientes: 

<img src-'URL Absoluta"> 

<¡mgsrc="URL Relativa"> 


height 

El atributo height, permite especificar el alto de la imagen en pixeles. 

Siempre que se especifique el ancho y alto de la imagen, el navegador 
reservara el espacio correspondiente para la imagen cuando se produzca la carga del 
documento. 

Si no se especifican los tamaños de la imagen, el navegador no podrá realizar 
la reserva de espacio en el documento, hasta que se haya completado la carga de la 
imagen. 

El especificar ancho y alto de la imagen, no significa que se realice una 
reducción o ampliación del tamaño en bytes de la imagen, es decir la imagen se ha 
de leer completa, independientemente del tamaño especificado. 

Si se especifica un tamaño que no siendo el tamaño real de la imagen, se 
puede producir un efecto de pixelado o dientes de sierra, con la respectiva pérdida 
de calidad en la visualización de la imagen. 

Si se quiere realizar cambios de tamaño, escalado, calidad, etc. Sobre la 
imagen se han de hacer sobre la misma con algún tipo de programa especial, ya que 
ni el navegador ni el lenguaje realizan esta función. 

La sintaxis de la etiqueta con el atributo height, es la siguiente. 

<¡mgsrc-'valor" height-'Valor En Pixeles"> 


width 


El atributo width, permite especificar el ancho de visualización de la imagen, 
con un valor numérico en pixeles. 
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La sintaxis de la etiqueta con el atributo ividth aplicado es la siguiente. 

<¡mgsrc="valor" height-'Valor En Pixeles" wldth-'Valor En Pixeles"> 


alt 


El atributo alt, permite especificar un texto alternativo para la imagen. Este 
texto alternativo es visualizado cuando se produce un error en el atributo src, la 
conexión fuese muy lenta o si el usuario utiliza un lector de pantalla. 

Algunos navegadores visualizan el texto de este atributo como una pequeña 
ventana emergente, aunque no es el comportamiento correcto, para realizar la 
acción de visualizar la ventana emergente es preferible utilizar el atributo title. 

La sintaxis de la etiqueta con el atributo alt aplicado es la siguiente. 

<img src="Valor" alt-Texto Alternativo de la imagen"> 


ismap 


El atributo ismap , permite indicar que la imagen que se está cargando es 
una imagen considerada como imagen de mapa de servidor, es decir una imagen 
que puede tener zonas seleccionables que sirven como enlaces. 

Es un atributo booleano, es decir no tiene valor asociado si aparece en una 
etiqueta de imagen, indica que la misma es un mapa de imagen. 

El atributo solo está permitido en caso de que la etiqueta de imagen sea 
descendiente de una etiqueta de enlace con una referencia valida de enlace. 

La sintaxis de la etiqueta con el atributo ismap es la siguiente. 

<a href="valor"><imgsrc="Valor"alt="Texto Alternativo de la imagen" ismap></a> 


usemap 

El atributo usemap, permite especificar que la imagen utilice un mapa de 
imagen con zonas seleccionables, asociando la etiqueta con un mapa de imagen 
definido con la etiqueta <map>, estableciendo de esta forma las zonas 
seleccionables de la imagen. 

El atributo no está permitido utilizarlo si la etiqueta de imagen es 
descendiente de una etiqueta de enlace o botón. 

Como el atributo hace referencia a una etiqueta que define el mapa de 
imagen, comentamos la sintaxis con la etiqueta asociada <map>, la cual permite 
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crear y definir las zonas, aunque es muy recomendable utilizar programas que 
generen el código de las zonas, ya que las mismas se han de establecer mediante 
coordenadas de pixeles y por tanto es bastante tedioso establecerlas. 

La sintaxis de la etiqueta con el atributo y etiquetas asociadas es la siguiente. 
<¡mg src-'valor" usemap="#NombreMapa"> 

<map name="NombreMapa"> 

<area shape-'rect" coords="0,0,82,126" href-'valorenlace" alt="valor"> 

<area shape-'circle" coords="90,58,3" href="valorenlace" alt="valor"> 

<area shape-'polygon" coords="124,58,8" href="valorenlace" alt="valor"> 

</map> 

Como se puede observar la etiqueta <map> permite establecer zonas 
rectangulares, circulares o poligonales. Por eso se recomienda utilizar un programa a libre 
elección del usuario, de los muchos existentes para crear las imágenes y generar el código 
html del mapa de imagen. 

Se ha de tener en cuenta que si se alterase una vez creado el mapa de imagen, las 
características de la imagen se ha de volver a crear el mapa de imagen ya que las 
coordenadas podrían haber variado con respecto a la imagen original. 

El siguiente ejemplo muestra el uso de la etiqueta con el atributo y etiquetas 
asociadas. 


<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-’author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<imgsrc="mapamundi.jpg" usemap="#Mapa1" alt="MapaMundi" /> 
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<map name="Mapa1"> 

<area shape-'rect" coords="310,61,410,133" href="http://www.eu.com/" alt="Europa" 
title="Europa" /> 

<area shape-'rect" coords=" 141,64,284,291" href="http://www.america.com/" 
alt="America" title="America" /> 

</map> 

</body> 

</html> 


El resultado en el navegador ha de ser similar al que se muestra en la siguiente 
imagen. 


B Ejercicios prácticos HTM1 x 

<- C D localhost/ejerc¡c¡oshtml5/clase.html fe = 

Aplicaciones Q aprendoencasa.com CD Nueva carpeta C] Otros marcadores 


• 0 * 



90 - 
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Etiqueta <TABLE> 


La etiqueta <table>, permite definir tablas. Una tabla es una cuadricula de casillas 
o celdas, divididas en filas y columnas. 


Las tablas para componerlas se hace uso de otras etiquetas, las cuales no tienen 
sentido sino están situadas dentro de una etiqueta de tabla. Estas etiquetas son las 
siguientes. 


Etiquetas 

Descripción 

< table > 

Definición de una tabla. 

<th> 

Definición de cabecera de tabla. 

<tr> 

Define una fila en la tabla. 

<td> 

Define una celda en la tabla. 

<caption> 

Define el nombre o título de la tabla. 

A 

o 

o 

cjjjf 

1 

V 

Especifica un grupo de una o más columnas para aplicar formato. 

<col> 

Especifica las propiedades de una columna de las columnas definidas en 
un elemento colgroup 

<thead> 

Define la cabecera de la tabla. 

<tbody> 

Define el cuerpo de la tabla 

<tfoot> 

Define el pie de la tabla. 


Definición de una tabla sencilla 

Para crear una tabla sencilla se ha de utilizar en primer lugar la etiqueta <table>, 
la cual define la tabla. Y dentro de ella se han de situar por cada fila una etiqueta <tr >, 
mientras que por cada casilla o celda dentro de la fila, se puede utilizar una etiqueta <th> 
o <td >, dependiendo de que sea una casilla de cabecera o normal. 

El siguiente ejemplo muestra la definición de una tabla de dos filas por dos 
columnas. Aunque en versiones anteriores de E1TML, se pueden aplicar varios atributos a la 
etiqueta < table >, actualmente solo está permitido uno, el atributo border, al cual se le 
puede dar un valor de O o 1. 

De esta forma se visualiza un borde en la tabla, este atributo solo se ha de utilizar 
cuando se está realizando el documento web por motivos de visualización del diseño, 
siendo conveniente quitar el mismo cuando se publique el documento y establecer los 
formatos de la tabla mediante hojas de estilo. 

Para los ejemplos utilizados y con el fin de poder apreciar el resultado en el 
navegador se ha establecido el atributo border con un valor de 1. 
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<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<table border="l "> 

<caption>Titulo de la tabla</caption> 

<tr> 

<th>Co I. Ca b. 1 </th> 

<th>Col.Cab.2</th> 

</tr> 

<tr> 

<td>Celda 1 </td> 

<td>Celda 2</td> 

</tr> 

</table> 

</body> 

</html> 

El ejemplo anterior ha de mostrar un resultado al que se muestra a continuación en 
la imagen. 


B Ejercicios prácticos HTML x 

O O localhost/ejercicioshtml5/clase.html <£? ^ E 

"■ Aplicaciones Cll aprendoencasa.com Cü Nueva carpeta CD Otros marcadores 


Titulo de la tabla 


Col.Cab.l 

Col.Cab.2 

Celda 1 

Celda 2 
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Se ha de observar que para cada una de las filas de la tabla, se utiliza la etiqueta 
<tr >, y como contenido de las mismas, se utilizan etiquetas <th> o <td>, 
dependiendo de que se quiera establecer celdas de encabezado o normales. Las celdas o 
casillas de encabezado se visualizan con una fuente fuerte a diferencia de las normales. Para 
definir el título de tabla se ha utilizado la etiqueta <caption >. 

Definición de una tabla con combinación de columnas 

Uno de los atributos que se pueden aplicar a las etiquetas de celda, 
independientemente que sean de encabezado o normales. Es el atributo colspan, el cual 
permite realizar la combinación de varias columnas en una sola. 

Para especificar el valor del atributo, se ha de indicar el número de columnas sobre 
las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre 
comillas dobles. 

El siguiente ejemplo muestra el uso del atributo en una tabla que tiene celdas 
combinadas aplicada la combinación sobre las columnas. 


<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<table border="1 "> 

<caption>Tabla con combinación de columnas</caption> 

<tr> 

<th colspan-'2">Celda Combinada</th> 

<th>Celda Normal</th> 

<th colspan-'2">Celda Combinada</th> 

</tr> 
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<tr> 

<td>C1</td> 

<td>C2</td> 

<td>C3</td> 

<td>C4</td> 

<td>C5</td> 

</tr> 

<tr> 

<td>C6</td> 

<td>C7</td> 

<td>C8</td> 

<td colspan-'2">C9 Comb.</td> 
</tr> 

</table> 

</body> 

</html> 


El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 



Como se puede observar en el ejemplo, se ha realizado la combinación de las 
columnas 1 y 2, de la primera fila, y también las columnas 4 y 5 de la misma fila. 

También se ha realizado la combinación de las columnas 4 y 5 de la última fila de la 

tabla. 
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Definición de una tabla con combinación de filas 

Al igual que se puede realizar la combinación de columnas, también se puede 
realizar la combinación de filas, mediante el atributo rowspan. 

Para especificar el valor del atributo, se ha de indicar el número de filas sobre las 
que se quiere realizar la combinación, utilizando un valor numérico encerrado entre 
comillas dobles. 

El siguiente ejemplo muestra el uso del atributo en una tabla que tiene celdas 
combinadas aplicada la combinación sobre las filas. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<table border="1 "> 

<caption>Tabla con combinación de filas</caption> 

<tr> 

<th>Celda 1 </th> 

<th>Celda 2</th> 

<th>Celda 3</th> 

</tr> 

<tr> 

<td rowspan="2">Celda Combinada</td> 

<td>Celda 5</td> 

<td rowspan="2">Celda Combinada</td> 

</tr> 

<tr> 
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<td>Celda 7</td> 
</tr> 

</table> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente. 


B Ejercicios prácticos HTML x 

<- -> C O localhost/ejercic¡oshtml5/dase.html ^ ^ S 

II: Aplicaciones Q aprendoencasa.com Q Nueva carpeta Q Otros marcadores 


Tabla con combinación de filas 


Celda 1 

Celda 2 

Celda 3 

Celda Combinada 

Celda 5 

Celda Combinada 

Celda 7 


Definición de tabla con columnas y filas combinadas 


Se puede realizar la aplicación de los dos atributos de combinación de filas y 
columnas a las celdas de la tabla, formando así tablas que contienen celdas combinadas. 

El siguiente ejemplo muestra el uso de los atributos de combinación aplicados 
sobre una tabla. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-’author" contení-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<table border="1 "> 

<caption>Tabla con combinación de filas y columnas</caption> 
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<tr> 

<th>celda 1 </th> 

<th>celda 2</th> 

<th>celda 3</th> 

<th>celda 4</th> 

</tr> 

<tr> 

<td rowspan="3">celda 5</td> 
<td>celda 6</td> 

<td colspan="2">celda 7</td> 
</tr> 

<tr> 

<td>celda 8</td> 

<td>celda 9</td> 

<td rowspan="2">celda 10</td> 
</tr> 

<tr> 

<td colspan="2">celda 11 </td> 
</tr> 

</table> 

</body> 

</html> 


El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 


B Ejercicios prácticos HTML x 

4r C D localhost/ejercicioshtml5/clase.html 

■■ Aplicaciones Cll aprendoencasa.com CZZD Nueva carpeta 

Tabla con combinación de filas y 
columnas 


celda 1 

celda 2 

celda 3 

celda 4 

celda 5 

celda 6 

celda 7 

celda 8 

celda 9 

celda 10 

celda 1 1 


_ □ 


☆ ¥ = 

n Otros marcadores 
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Definición de tablas avanzadas 

En muchas ocasiones se puede necesitar tablas que tengan una mayor complejidad 
en su estructuración, debido a que puedan tener secciones de datos distintas, o se quiera 
realizar diferenciación entre los datos de la tabla y las secciones correspondientes a sus 
encabezados y pies. 

Para realizar este tipo de tablas, se pueden utilizar una serie de etiquetas que 
permiten crear tablas denominadas avanzadas. 

Una de las características de estas tablas es que están compuestas por una sección 
de cabecera, que se define mediante la etiqueta <thead>, una sección de pie de tabla, 
definida mediante la etiqueta <tfoot>, y por ultimo una o varias secciones de cuerpo de 
tabla, donde se suele ubicar los datos de la misma, representada por la etiqueta <tbody>. 

Las etiquetas de cabecera y pie de tabla siempre se han de definir antes que 
cualquier etiqueta de cuerpo de tabla. 

Se pueden realizar agrupaciones de columnas para aplicar un formato por separado 
o en común a las mismas, para realizar estas agrupaciones se ha de utilizar la etiqueta 
<colgroup >, especificando a continuación como su contenido y mediante la etiqueta 
<col>, las columnas y el ámbito de las mismas sobre el cual se quiere aplicar el formato. 

El siguiente ejemplo muestra el uso de las etiquetas avanzadas. 

<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-'www.aprendoencasa.com, Curso práctico 

HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<table border-T style-'width: 100%"> 

<caption>Titulo de tabla</caption> 

<colgroup> 
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<col style="width: 20%"/> 

<col style="width: 40%"/> 

<col style-'width: 40%"/> 

</colgroup> 

<thead> 

<tr> 

<th rowspan="2">Tabla Avanzada</th> 

<th colspan="2">Cabecera Múltiples Columnas</th> 
</tr> 

<tr> 

<th>Primera Col. Cab </th> 

<th>Segunda Col. Cab.</th> 

</tr> 

</thead> 

<tfoot> 

<tr> 

<td colspan-'3">Pie de tabla </td> 

</tr> 

</tfoot> 

<tbody> 

<tr> 

<th>Fila 1 </th> 

<td>Fila 1 Columna 1 </td> 

<td>Fila 1 Columna 2</td> 

</tr> 


<tr> 

<th>Fila 2</th> 

<td>Fila 2 Columna 1 </td> 
<td>Fila 2 Columna 2</td> 
</tr> 

</tbody> 

</table> 

</body> 

</html> 
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El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente. 


X 


Ejercicios prácticos HTML x 

C D localhost/ejerc¡cioshtml5/clase.html S 

Aplicaciones Q aprendoencasa.com Q Nueva carpeta CD Otros marcadores 


Titulo de tabla 


Tabla Avanzada 

Cabecera Múltiples Columnas 

Primera Col. Cab. 

Segunda Col. Cab. 

Fila 1 

Fila 1 Columna 1 

Fila 1 Columna 2 

Fila 2 

Fila 2 Columna 1 

Fila 2 Columna 2 

Pie de tabla. 


En primer lugar se han especificado estilos css para varios elementos de la tabla. El 
primero de ellos en la propia etiqueta de la tabla, especificando que su ancho ha de ser el 
100% del ancho de visualización del navegador. 

Como se puede observar en el ejercicio, se ha definido un grupo de columnas 
mediante la etiqueta <colgroup >, y en el interior de la misma se han especificado los 
anchos de tres columnas mediante la etiqueta <col>, representando cada etiqueta el 
orden de la columnas, de esta forma la primera columna tiene un ancho del 20% y las dos 
siguientes columnas tienen un ancho del 40% cada una. 

A continuación se especifica el encabezado de la tabla mediante la etiqueta 
<thead >, y seguidamente el pie de la tabla, mediante la etiqueta <tfoot >, una vez 
especificados encabezado y pie, se especifica el cuerpo de la tabla mediante la etiqueta 
<tbody>, la cual contiene las filas y columnas de datos. 
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Ejercicios 4 



I o Realizar los siguientes documentos web, que se muestran en las siguientes 
imágenes. Intentando que se asemeje lo más posible al resultado mostrado. Escribe el 
código utilizado. 


& Ejercicios prácticos HTM1 x 

C D localhost/ejerc¡c¡oshtml5/clase.html 

Aplicaciones O aprendoencasa.com C] Nueva carpeta 


Tabla Simple 


Col a 

Col b 

Col c 

Coid 

Fil 1 

Celbl 

Cel el 

Cel di 

FU 2 

Celb2 

Cel c2 

Cel d2 

Fil 3 

Celb3 

Cel c3 

Cel d3 


n 


X 


☆ > = 

n Otros marcadores 


_ □ 


n Otros marcadores 



Columna 1 

Columna 2 

Columna 2a 

Columna 2b 

Fila 1 

Fila la 

123 

456 

o\ 
co 

1 

Fila Ib 

123 

456 

789 

Fila 2 

123 

456 

789 


B Ejercicios prácticos HTMl x 

<- G L2 localhost/ejerddoshtml5/dase.html 

Aplicaciones Q aprendoencasa.com CD Nueva carpeta 
Nombre de la tabla 
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☆ | = 

n Otros marcadores 


Mes 

concepto 

Total 

Corriente 

Facturas 

Coche 

Casa 

Enero 

- 

... 

— 

— 

— 

Febrero 

... 

... 

— 

— 

— 

Marzo 

4 

4 

7 

o 

J 

- 

Abril 

5 

7 

6 

2 

- 

Mayo 

5 

“ 

6 


- 

Junio 

5 

7 

6 

2 

- 

Totales 

— 

— 

— 

— 

— 

Corriente 

Facturas 

Coche 

Casa 

TOTAL 


Utiliza este espacio para escribir tus respuestas. 


Ejercicios prácticos HTMl x 

<- c D localhosVejerc¡c¡oshtml5/clase.html 

Aplicaciones Q] aprendoencasa.com Q] Nueva carpeta 
Gasto doméstico Primer Semestre 
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Etiqueta <UL> 


La etiqueta <ul>, permite definir una lista desordenada (“Unordered List”). Esta 
etiqueta es a su vez contenedora de otras etiquetas, siendo estas últimas las que componen 
cada uno de los elementos de los que está compuesta la lista. 

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li >, en 
la que se ha de especificar el texto que compone el elemento de la lista. 

Una lista puede contener como elemento de lista, otra lista, es decir se pueden 
crear listas anidadas. 

La sintaxis de la etiqueta es la siguiente. 

<ul> 

<li>Elementode lista</li> 

<li>Elementode lista</li> 

<li>... </li> 

</ul> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Lista con elementos desordenados</p> 

<ul> 

<li>Uno</l¡> 
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<li>Dos</li> 

<l¡>Tres</li> 

</ul> 

<p>Lista con sublistas anidadas</p> 

<ul> 

<li>Primero</li> 

<li>Segundo 

<ul> 

<li>Segundo Uno</li> 
<li>Segundo Dos</li> 

</ul> 

</l¡> 

<l¡>Tercero</li> 

</ul> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al que se visualiza en la 
imagen siguiente. 
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Etiqueta <0L> 


La etiqueta <ol>, permite definir listas o viñetas ordenadas (“Ordered List”), bien 
con numeración o alfabéticamente. Esta etiqueta es a su vez contenedora de otras 
etiquetas, siendo estas últimas las que componen cada uno de los elementos de los que 
está compuesta la lista. 

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en 
la que se ha de especificar el texto que compone el elemento de la lista. 

Una lista puede contener como elemento de lista, otra lista, es decir se pueden 
crear listas anidadas. 

La sintaxis de la etiqueta es la siguiente. 

<ol reversed start="valor"type="valor"> 

<li>Elemento de lista</li> 

<li>Elementode lista</li> 

<li>... </li> 

</ol> 


Los atributos que pueda utilizar la etiqueta, aparte de los globales, son los 
siguientes. 

type 

El atributo type, permite especificar el tipo de orden que se de aplicar a la 
lista, estableciendo de esta forma que la lista se represente mediante diferentes 
tipos de numeración. 

Los diferentes valores que puede recibir este atributo son los siguientes 


Valor 

Descripción 

1 

Es el valor por defecto en caso de no especificarse el atributo. 
Realiza la numeración de las lista utilizando valores numéricos. 


(1,2,3...) 

a 

Establece que la numeración de la lista se realice utilizando 
caracteres alfabéticamente en letra minúscula, (a, b, c ...) 

A 

Establece que la numeración de la lista se realice utilizando 
caracteres alfabéticamente en letra mayúscula. (A, B, C ...) 
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i 

Establece que la numeración de la lista se realice utilizando 
numeración en formato de números romanos en letra 
minúscula, (i, ii, iii, iv ...) 

I 

Establece que la numeración de la lista se realice utilizando 
numeración en formato de números romanos en letra 
mayúscula. (I, II, III, IV ...) 


start 


El atributo start , permite indicar el valor de inicio, por el cual ha de 
comenzar la lista ordenada, siendo este un valor numérico, en caso de ser la lista 
ordenada de forma alfabética, el valor de inicio que se exprese, se corresponderá 
con el orden el abecedario ASCII correspondiente. 

La sintaxis de la etiqueta con el atributo es la siguiente. 

<ol start="valor"> 

<li>Elemento de lista</li> 

<li>Elemento de lista</li> 

<li>... </l¡> 

</ol> 

reversed 

El atributo reversed , permite indicar que la numeración u orden que se 
haya establecido se represente de forma inversa, si tuviéramos una lista con valor de 
inicio 1, 2,3, sucesivamente, su representación al encontrarse este atributo seria 
3,2,1. 

Es un atributo con valor booleano, en caso de aparecer el atributo en la 
etiqueta se aplica el valor. 

La sintaxis del atributo aplicado a la etiqueta es la siguiente. 

<ol reversed> 

<li>Elemento de lista</li> 

<li>Elemento de lista</li> 

<l¡>... </l¡> 

</ol> 
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El siguiente ejemplo muestra el uso de las listas ordenadas utilizando variaciones 
sobre la misma. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" contení-José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name="generator" content- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Lista ordenada numéricamente por defecto</p> 

<ol> 

<li>Elemento</li> 

<l¡>Elemento</li> 

<li>Elemento</li> 

</ol> 

<p>Lista ordenada aIfabéticamente</p> 

<oltype="a"> 

<li>Primero</l¡> 

<l¡>Segundo</li> 

<li>Tercero</li> 

</ol> 

<p>Lista con todos los atributos</p> 

<oltype="l" start="10" reversed> 

<l¡>Elemento</li> 

<l¡>Elemento</li> 

<li>Elemento</li> 

</ol> 

</body> 

</html> 
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El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
siguiente imagen. 




Etiqueta <DL> 


La etiqueta <dl> , permite definir lo que se denominan, listas de definición, las 
cuales a su vez están compuestas por un término , y una definición. 

Para realizar la lista se utilizan dos etiquetas más, la primera es <dt> </dt >, que 
permite especificar el termino en la lista. Y otra etiqueta <dd> </dd>, que permite 
especificar la definición. 

La sintaxis de la lista con las etiquetas correspondientes, es la siguiente. 

<dl> 

<dt>Termino a definir</dt> 

<dd>Definición del termino</dd> 
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<dt>Termino a definir</dt> 
<dd>Definición del termino</dd> 


</dl> 


El siguiente ejemplo muestra el uso de la etiqueta, creando una lista de definición 
de términos. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="descript¡on" content-'Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Listas de definición</p> 

<dl> 

<dt>BIOS</dt> 

<dd>Basic Input Output System</dd> 

<dt>RAM</dt> 

<dd>Ramdon Access Memory</dd> 

<dt>HTML5</dt> 

<dd>Gracias por visitar www.aprendoencasa.com</dd> 

</dl> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que muestra a continuación. 
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0 


E¿3 Ejercicios prácticos HTML x 


4- C D localhost/ejerc¡c¡oshtml5/clase.html 

☆ ¥ = 

Aplicaciones Q] aprendoencasa.com Q] Nueva carpeta 

r~l Otros marcadores 

Listas de definición 


BIOS 

Basic Input Output System 

RAM 

Ramdon Access Memory 

HTML 5 

Gracias por visitar www. aprendo ene asa.com 



Etiqueta <DIV> y <SPAN> 


El lenguaje HTML5, define mediante etiquetas elementos dentro de un documento 
web. Estos elementos pueden ser de dos tipos denominados, elementos de bloque y 
elementos en línea. 

Su nombre es debido a la forma en que ocupan espacio dentro del documento que 
se está creando. Un elemento en bloque significa que el elemento ocupa todo el ancho del 
documento disponible produciendo un retorno de línea al final del mismo. Si se 
visualizarán los bordes alrededor del elemento, un elemento en bloque quedaría de la 
siguiente forma en un documento: 

Ele. b ujue 
t Rlnqlt? r if,.,. 


Como se puede observar el elemento en bloque ocuparía todo el ancho de página 
del documento. 

Los elementos en línea por el contrario solo utilizan el espacio que ocupan, 
observando la imagen anterior el elemento en línea está insertando dentro de un elemento 
de bloque y tiene el tamaño correspondiente al espacio que ocupa. 

A continuación se muestra un ejemplo real de página en la cual se visualizan los 
bordes para varios elementos en el cual se puede comprobar el espacio que ocupan cada 
tipo de elemento. 
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Las etiquetas <div> y <span>, no tienen ningún tipo de significado especial, 
solo que la primera se define como un elemento de bloque y por tanto el navegador 
mostrara un salto de línea antes y después de la misma. Mientras que la segunda es un 
elemento de línea. 

Cuando se utilizan actualmente en un documento web, se pueden utilizar para 
establecer opciones de formato mediante hojas de estilo a bloques completos o elementos 
individuales del documento. 

Un uso muy común de las mismas era también para establecer el diseño del 
documento mediante hojas de estilo. Aunque actualmente con la nueva versión de HTML5 
que proporciona etiquetas para establecer dicho diseño, se recomienda la utilización de las 
nuevas etiquetas en sustitución de div y span. 

La sustitución de las etiquetas div y span, por la nuevas etiquetas semánticas de 
HTML5, se ofrece como alternativa recomendándose la utilización de las ultimas, pero 
muchos desarrolladores web, siguen utilizando para establecer divisiones de sección, 
artículos, etc., en sus documentos las etiquetas div y span. Aunque también todavía hay 
programadores que para maquetar el diseño del documento siguen utilizando tablas, esta 
última opción ya no es recomendada por el consorcio W3C. 

Las dos etiquetas en esta última versión del lenguaje no disponen de atributos que 
aplicar a las mismas. 

La sintaxis de las etiquetas es la siguiente. 
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<div> Contenido del bloque, Otras etiquetas, etc. </div> 

<div>Contenido <span>del bloque</span> con elementos en línea</div> 


El siguiente ejemplo muestra el uso de ambas etiquetas en un documento web. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name="generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<p>Elementos de bloque y línea</p> 

<div style="color:#OOOOFF"> 

<h3>Encabezado de tipo 3</h3> 

<p>Párrafo con formato aplicado.</p> 

</div> 

<div> 

<p>Párrafo con formato <span style- 'color: blue">aplicado</span> a un elemento en 
línea</p> 

</div> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al mostrado en la imagen 
siguiente. 
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X 


Ejercicios prácticos HTML x 


<- c Q localhost/ejerc¡c¡oshtml5/clase.html 

ni 

Aplicaciones Q] aprendoencasa.com CD Nueva carpeta 

n Otros marcadores 

Elementos de bloque y linea 


Encabezado de tipo 3 


Párrafo con formato aplicado. 


Párrafo con formato aplicado a un elemento en linea 



Etiqueta <HEADER> 


La etiqueta <header>, es la primera de las nuevas etiquetas de HTML5, incluidas 
dentro de la denominación de “web semántica”, que consiste en la utilización de estas 
etiquetas para la estructura del documento, dotando al documento de sentido en su 
estructura y formato por el nombre de las etiquetas. 

Aunque no es obligatorio el uso de las mismas, si es recomendado. Ya que 
actualmente los buscadores están empezando a dar importancia a la construcción 
semántica del documento web. 

La finalidad de la etiqueta es la de especificar un encabezado dentro de un 
documento o sección. Se suele utilizar como contenedor para el contenido de 
introducción o para enlaces de navegación. 

Se pueden utilizar varios encabezados con esta etiqueta dentro de otras etiquetas 
semánticas. Siempre y cuando estas no sean encabezados, pies de documento, o etiquetas 
de tipo encabezado como la de dirección. 

La sintaxis de la etiqueta es la siguiente. 

<header> 

Contenido del encabezado... 

</header> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web con varias 
secciones semánticas. 
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<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-Vvww.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<header> 

<h1>Encabezamiento del documento.</h1> 

<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de 
texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 
1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido 
usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos 
espécimen</p> 

</header> 

<section> 

<h1>Encabezamiento de sección</h1> 

<p>No sólo sobrevivió 500 años, sino que también Ingresó como texto de relleno en 
documentos electrónicos, quedando esencialmente igual al original. </p> 

</section> 

<article> 

<header> 

<h1>Encabezamiento de articulo</h1> 

</header> 

<p>Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales 
contenían pasajes de Lorem Ipsum, y más recientemente con software de autoedición, 
como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum </p> 
</article> 

</body> 

</html> 
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El ejercicio anterior ha de mostrar un resultado similar al que se muestra a 
continuación. 


B Ejercicios prácticos HTML X 

<- C O localhost/ejerc¡cioshtml5/clase.h 

Aplicaciones Q aprendoencasa.com Q Nueva carpeta 

Encabezamiento del documento. 

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha 
sido el texto de relleno estándar de las industrias desde el año 1500. cuando un impresor (N. del T. 
persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal 
manera que logró hacer un libro de textos espécimen 

Encabezamiento de sección 

No sólo sobrevivió 500 años, sino que también ingresó como texto de relleno en documentos 
electrónicos, quedando esencialmente igual al original. 

Encabezamiento de articulo 

Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenían pasajes de 
Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus 
PageMaker, el cual incluye versiones de Lorem Ipsum. 


itml 


☆ ¥ = 

r~l Otros marcadores 


Etiqueta <NAV> 


La etiqueta <nav>, perteneciente también a las nuevas etiquetas semánticas. 
Permite especificar un conjunto de vínculos o enlaces de navegación. 

No significa que todos los enlaces de navegación por los documentos del sitio, 
hayan de estar situados en el contenido de la etiqueta. Pero es una forma de agrupar 
opciones de navegación tipo menú o mapas de enlaces del sitio. 

La sintaxis de la etiqueta es la siguiente. 

<nav> 

Contenido de la etiqueta 

</nav> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web, 
utilizando la misma para establecer un menú de navegación. 
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<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" content-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content-Vvww.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<header> 

<h1>Enlaces de navegación</h1> 

</header> 

<nav> 

<a href="#lnic¡o">lnic¡o</a> 

<a href="#Medio">Medio</a> 

<a href="#Final">Final</a> 

</nav> 

<section id="lnicio"> 

<header> 

<h2>lnicio</h2> 

</header> 

<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: 
Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas 
estas borrascas que nos suceden son </p> 

</section> 

<section id="Medio"> 

<header> 

<h2>Medio</h2> 

</header> 

<p>Todas estas borrascas que nos suceden son señales de que presto ha de serenar 
el tiempo y han de sucedemos bien las cosas; porque no es posible que el mal ni el 
bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien 
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está ya cerca </p> 

</section> 

<section id="Final"> 

<header> 

<h2>Final</h2> 

</header> 

<p>Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti 
no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de 
tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace 
más que otro </p> 

</section> 

</body> 

</html> 

El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 


[h] Ejercicios prácticos HTML x 

<- C D localhost/ejerc¡cioshtml5/dase.h 

Aplicaciones Q aprendoencasa.com C] Nueva carpeta 

Enlaces de navegación 

Inicio Medio Final 

Inicio 

Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, 
que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden 
son. 

Medio 

Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de 
sucedemos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue 
que, habiendo durado mucho el mal, el bien está ya cerca. 

Final 

Asi que, no debes congojarte por las desgracias que a mi me suceden, pues a ti no te cabe parte 
dellas. Y, riéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, 
Sancho, que no es un hombre más que otro si no hace más que otro. 


_ n 


itml 


_ ☆ '■¥ = 

n Otros marcadores 
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Etiqueta <SECTION> 



La etiqueta <section>, pertenece también a las etiquetas semánticas, nuevas en 
HTML5, y permite definir secciones en el documento como pueden ser capítulos 
encabezados, pies, o cualquier otro tipo de sección en el documento. 

La sintaxis de la etiqueta es la siguiente. 

<section> 

Contenido de la sección... 

</section> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web con varias 
secciones. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name="generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<header> 

<h1>Secciones</h1> 

</header> 

<section id="izquierda"> 

<header> 

<h2>lnicio</h2> 

</header> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa.</p> 

</section> 
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<section id="Derecha"> 

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. Doñee quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> 
</section> 

<section id="Pie"> 

<p>Nulla consequat massa quis enim. Doñee pede justo, fringilla vel, aliquet nec, 
vulputate eget, areu. In enim justo, rhoneus ut, imperdiet a, venenatis vitae, justo </p> 
</section> 

</body> 

</html> 

El anterior ejemplo ha de mostrar un resultado similar al que se muestra a 
continuación en la imagen. 



Etiqueta <ARTICLE> 


La etiqueta < article >, permite especificar contenido independiente o autónomo. 
De forma que debería que ser posible distribuir el mismo independientemente del resto 
del documento web. Perteneciente también la etiqueta a las denominadas semánticas. 

Se indica que su posible utilización podría ser para mensajes de foros, noticias, 
artículos de blog, comentarios, etc. 
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La sintaxis de la etiqueta es la siguiente. 

<article> 

Contenido del artículo... 

</article> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<header> 

<h1>Utilización de artículos</h1> 

</header> 

<section> 

<header> 

<h1>Principio de sección</h1> 

</header> 

<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: 
Sábete, Sancho, que no es un hombre más que otro si no hace más que otro </p> 
</section> 

<article> 

<header> 

<h1>Articulo</h1> 

</header> 

<p>Sed ut perspiciatis unde omnis iste natus error sitvoluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
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et quasi architecto beatae vitae dicta sunt explicabo </p> 
</article> 

</body> 

</html> 


El anterior ejemplo ha de mostrar un resultado similar al que se muestra a 
continuación. 


B Ejercicios prácticos HTMl x 

C LÓ localhost/ejercic¡oshtml5/clase.html 

¡i: Aplicaciones CU aprendoencasa.com CD Nueva carpeta Q Otros marcadores 

Utilización de artículos 

Principio de sección 

Y. \iendole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, 
que no es un hombre más que otro si no hace más que otro. 

Articulo 

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae \itae dicta 
sunt explicabo. 



Etiqueta <ASIDE> 


La etiqueta <aside>, permite definir contenido al margen del contenido principal, 
que mantenga relación con el mismo. 

La sintaxis de la etiqueta es la siguiente. 

<aside> 

Contenido relacionado con el principal... 

</aside> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 

<!DOCTYPE HTML> 

<html> 
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<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

</head> 

<body> 

<h1>Utilización de aside</h1> 

<section id="Principal"> 

<h1>Sección</h1> 

<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: 
Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.</p> 
</section> 

<aside> 

<h3>Aparte</h3> 

<p>Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti 
note cabe</p> 

</aside> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al siguiente. 
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Etiqueta < FIGURE > 


La etiqueta <figure>, perteneciente a las nuevas etiquetas semánticas. Permite 
especificar contenido autónomo como pueden ser ilustraciones, diagramas, fotos, listas de 
código, etc. 

Aunque el contenido de la etiqueta debe guardar relación el contenido principal, la 
posición de la etiqueta se considera independiente, por tanto si se quitara la misma, no 
debería quedar afectado el contenido principal. 

Junto a la etiqueta, se suele utilizar otra etiqueta denominada 
<figcaption> </figcaption>, la cual permite especificar una denominación o nombre 
para la figura insertada. Esta última etiqueta se ha de situar bien como primer elemento de 
contenido de la etiqueta < figure >, o como último elemento de la misma. 

La sintaxis de la etiqueta es la siguiente. 

<figure> 

<figcaption>Denom¡nación de la figura</figcaption> 

Contenido de la figura... 

</figure> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" contení-José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<header> 

<h1>Utilización de figure</h1> 

</header> 

<section id="Principal"> 
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<header> 

<h1>Sección</h1> 

</header> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa </p> 

<figure> 

<figcaption>Logotipo del lenguaje HTML5</figcaptlon> 

<¡mgsrc-’images.jpg" title="logotipo html5" alt="logotipo html5"> 

</figure> 

</section> 

</body> 

</html> 



El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
siguiente imagen. 


& Ejercicios prácticos HTM: x 

4- G Ü locaihost/ejerc¡cioshtml5/clase.h 

Aplicaciones C] aprendoencasa.com Q) Nueva carpeta 

Utilización de figure 

Sección 

Loreni ipsmn dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
massa. 

Logotipo del lenguaje HTML5 

HTML 



tml 


☆ V = 

n Otros marcadores 
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Etiqueta <FOOTER> 


La etiqueta <footer> , permite definir un pie de página de un documento o 
sección. Se recomienda que el contenido de la etiqueta ha de guardar relación con el 
elemento que la contiene. 

Si se utiliza a pie de página, suele contener información relativa al autor del 
documento, copyright, enlaces, términos de uso, información de contacto, etc. 

Un documento web, puede contener varias etiquetas footer situadas en diferentes 
sitios, correspondiéndose con secciones, artículos, etc. 

La sintaxis de la etiqueta es la siguiente. 


<footer> 

Contenido del pie... 
</footer> 


El siguiente ejemplo muestra el uso de la etiqueta en varios apartados de un 
documento web. 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-’author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<header> 
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<h1>Utilización defooter</h1> 

</header> 

<section id="Principal"> 

<header> 

<h1>Sección</h1> 

</header> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa.</p> 

<footer> 

<p>Cum sociis natoque penatibus et magnis dis parturlent montes, nascetur 
ridiculus mus. Doñee quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> 
</footer> 

</section> 

<article> 

<header> 

<h1>Articulo</h1> 

</header> 

<p>Nulla consequat massa quis enim. Doñee pede justo, fringilla vel, aliquet nec, 
vulputate eget, areu. In enim justo, rhoneus ut, imperdiet a, venenatis vitae, justo.</p> 
<footer> 

<p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat 
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p> 
</footer> 

</artiele> 

<footer> 

<h1>Pie de documento</h1> 

<p>Nullam dietum felis eu pede mollis pretium. Integer tineidunt. Cras dapibus. 
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, 
porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra 
quis, feugiat a,</p> 

</footer> 

</body> 

</htmi> 

El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente. 
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X 


a Ejercicios prácticos HTMl x 

<- CU localhost/ejercic¡oshtml5/clase.html 

•i: Aplicaciones C] aprendoencasa.com Q Nueva carpeta Cü Otros marcadores 

Utilización de footer 

Sección 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo lígula eget dolor. Aenean 
massa. 

Cuín sociis natoque penatibus et magnis dis parturient montes, nascetur ridicuhis mus. Doñee quam 
felis, ultricies nec, p clientes que eu, pretium quis, sem. 

Articulo 

Nulla consequat massa quis enim. Doñee pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In 
enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 

Aenean rulputate eleifend tellus. Aenean leo lígula, porttitor eu, consequat \itae, eleifend ac, enim. 
Aliquam lorem ante, dapibus in, viverra quis, feugíat a. 

Pie de documento 

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Yivamus elementum 
semper nisi. Aenean vulputate eleifend tellus. Aenean leo lígula, porttitor eu, consequat vitae, eleifend 
ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. 



Etiqueta <TIME> 


La etiqueta <time>, permite definir una hora con formato de 24 horas, o una 
fecha en formato gregoriano, opcionalmente con un tiempo y desplazamiento de zona 
horaria. 


Se debe de utilizar para establecer una codificación de fecha y hora, de forma 
legible para la máquina. De manera que los agentes de usuario y motores de búsqueda, 
puedan establecer recordatorios, eventos programados, o resultados de búsqueda más 
inteligentes. 
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La sintaxis de la etiqueta es la siguiente. 


<time datetime="valor">Conten¡do de la etiqueta... </time> 


El ejercicio siguiente muestra el uso de la etiqueta en un documento web. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

</head> 

<body> 

<header> 

<h1>Días Festivos</h1> 

</header> 

<section id="Principal"> 

<p><time datetime="2013-11-01 ">Hallowen</time></p> 

<p>Reunión familiar <time datetime="2013-12-25">Navidad</time> a las 
<time>10:00</time>h.</p> 

</section> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra a 
continuación. 


X 


& Ejercicios prácticos HTML X 


4- G Q localhost/ejerc¡c¡oshtml5/clase.html 

III 

■;j Aplicaciones Q aprendoencasa.com Q Nueva carpeta 

n Otros marcadores 

Dias Festivos 


Haíowen 

Reunión familiar Natidad a las 10:00 h. 
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Etiqueta <DETAILS> 


La etiqueta < details >, permite definir contenido que el usuario puede visualizar u 
ocultar según le interese. La etiqueta permite cualquier tipo de contenido, y para visualizar 
el mismo se ha de realizar un clic sobre el símbolo correspondiente en el navegador, para 
que la etiqueta muestre su contenido, ya que por defecto y si no se especifica lo contrario 
se establece como oculto. 

La sintaxis de la etiqueta es la siguiente. 

<detailsopen> 

<summary>Titulo del contenido</summary> 

Contenido de la etiqueta... 

</details> 


La etiqueta tiene solo un atributo, open, si se especifica el contenido de la etiqueta 
se muestra visible al cargar el documento web. Es un atributo booleano, por lo tanto solo 
está activado en caso de reflejarse el mismo en la etiqueta, por defecto no se suele utilizar. 

Por otra parte, para que se visualice como título de la etiqueta, sirviendo a su vez de 
texto de referencia, para visualizar o no el contenido, se utiliza la etiqueta 
<summary> </summary >, en la que se ha de teclear el título que se desea visualizar, 
esta etiqueta de título ha de ser la primera etiqueta del contenido de la etiqueta 
< details >. 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 

<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 
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<h1>Páginas webs ¡nteresantes</h1> 

<details> 

<summary>Buscadores</summary> 

<ul> 

<li><a href="http://www.google.es">Google</a></li> 

<l¡><a href="http://www.bing.es">Bing</a></li> 

</ul> 

</details> 

<details> 

<summary>Educación</summary> 

<ul> 

<l¡><a href="http://www.aprendoencasa.com">lnformática Online</a></li> 
<l¡><a href=" http ://ma n ua I. b u bok. com ">Li bros</a></li> 

</ul> 

</details> 

</body> 

</htmi> 

El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente. 
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Ejercicios 5 


I o Realizar los siguientes documentos web, que se muestran en las siguientes 
imágenes. Intentando que se asemeje lo más posible al resultado mostrado. 


Ejemplo de tabla avanzada - Opera 


_ " H r 


Archivo Editar Ver Marcadores Widgets Herramientas A^uda 

Resultado de la búsqueda 


Resultado de la búsqueda 


Imagen 

Datos 

\m 

Portátil 3 GHz 4 GB RAM 

Comprar: 2:9906 2.599 € 


Videocámara - Alta definición 1080p - 60 

GB 

Comprar: 1.099 € 999 € 

o 

Televisor - 46" - Fnll HD 

Comprar: 1.999 € 1.799 € 

S 

\w 

Móvil 3G Wi-Fi 8 GB 

Comprar: 399-6 349 € 
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2 o Realizar los siguientes documentos web, que se muestran en las siguientes 
imágenes. Intentando que se asemeje lo más posible al resultado mostrado. En esta 
ocasión se han de utilizar las etiquetas semánticas para estructurar el documento. 
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Etiqueta <AUDIO > 


La etiqueta <audio>, es una de las nuevas etiquetas del lenguaje HTML5, que 
permite reproducir un archivo de audio. 

Actualmente se pueden reproducir tres tipos de formato de audio, mp3, wav y ogg. 
Aunque también depende del navegador que se permita su reproducción. 

La siguiente lista muestra los formatos y su reproducción en los diferentes 
navegadores. 


Navegador 

MP3 

Wav 

Ogg 

Internet Explorer 

SI 

NO 

NO 

Chrome 

SI 

SI 

SI 

Firefox 

SI 

SI 

SI 

Safari 

SI 

SI 

NO 

Opera 

NO 

SI 

SI 


La sintaxis de la etiqueta es la siguiente. 

<audio autoplay Controls loop muted preload-'valor" src="valor"> 
Texto para navegadores que no soportan audio... 
</audio> 

Entre los atributos de la etiqueta encontramos los siguientes. 

src 


El atributo permite especificar la dirección URL del recurso al cual se quiere 
acceder, siendo en este caso el archivo que contiene el audio a cargar en el 
documento web. 

Se ha de especificar el archivo de audio con el formato adecuado para el 
navegador donde se vaya a reproducir el audio. 

Como esta opción no es predecible por el desarrollador y depende del 
usuario final. Se recomienda utilizar la etiqueta <source>, dentro de la etiqueta de 
audio, para especificar diferentes formatos, de forma que el navegador utilizado 
cargue la primera que sea capaz de reconocer. 
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autoplay 

El atributo permite especificar que el archivo de audio sea reproducido 
automáticamente, al ser el archivo cargado por el navegador. 

Es un atributo booleano, por tanto para que se ejecute el audio 
simplemente se ha de especificar el atributo en la etiqueta. 

Controls 



El atributo es booleano, por lo que al ser especificado en la etiqueta, 
permite que se visualicen los controles de control de audio, entre los que se 
encuentran, el botón de reproducción, pausa, búsqueda y volumen. 

loop 

Si se especifica el atributo, el archivo de audio es reproducido 
automáticamente en modo bucle, cuando finalice el audio volverá a empezar de 
nuevo. 

muted 


Al especificar el atributo, el archivo de audio será cargado, pero se activara 
la opción de silenciar el audio. 

preload 

El atributo tiene tres valores posibles valores: none, auto y metadata. El 
atributo permite definir si se realiza una precarga inicial del archivo de audio. 

Si se especifica el valor none, no se realiza ningún tipo de precarga y se 
espera que el usuario sea el que active el audio pulsando sobre el control 
correspondiente. 

Si se indica el valor auto, se realiza la precarga completa del archivo de 
audio, para que la reproducción sea más homogénea y no se produzcan paros o 
saltos en la misma. Se ha de utilizar si no se compromete la velocidad de descarga 
entre el cliente y servidor. 

Por ultimo si se especifica el valor metadata, se realiza como precarga solo 
la información concerniente al archivo de audio, como duración, dimensión, etc. 

Se ha de tener en cuenta que para realizar una carga correcta del formato de audio, 
se habría de utilizar la etiqueta < source >, la cual permite realizar la carga del archivo de 
audio en varios formatos. 
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Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de 
especificar, cuando se utilice la misma. 

Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al 
archivo de audio. Y otro atributo denominado type, el cual se utiliza para indicar el tipo 
MIME del archivo que se quiere reproducir. Entre los posibles tipos a utilizar por este 
último atributo se encuentran los siguientes: 


Valor MIME 

Audio/Video 

video/ogg 

Video 

video/mp4 

Video 

video/webm 

Video 

audio/ogg 

Audio (*.ogg) 

audio/mpeg 

Audio (*.mp3) 


El siguiente ejercicio muestra el uso de la etiqueta en un documento web. 

<!DOCTYPE HTML> 

<html> 

<head> 

<tltle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<audiocontrols> 

<source src-'Hoy.mp3" type="audio/mpeg"> 

<source src-’Hoy.ogg" type="audio/ogg"> 

El Navegador NO SOPORTAAUDIO. 

</audio> 

</body> 

</html> 
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El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación 
en la imagen. 



_ □ 


a Ejercicios prácticos HTM x 

C D localhosVejercicioshtml5/clase.htmi 

::: Aplicaciones Q aprendoencasa.com Q] Nueva carpeta 


☆ ¥ = 

P~1 Otros marcadores 


Etiqueta <VIDEO > 


La etiqueta <video>, es una de las nuevas etiquetas del lenguaje HTML5, que 
permite reproducir un archivo de video. 

Actualmente se pueden reproducir tres tipos de formato de video, mp4, WebM y 
ogg. Aunque también depende del navegador que se permita su reproducción. 

La siguiente lista muestra los formatos y su reproducción en los diferentes 
navegadores. 


Navegador 

MP4 

WebM 

Ogg 

Internet Explorer 

SI 

NO 

NO 

Chrome 

SI 

SI 

SI 

Firefox 

SI 

SI 

SI 

Safari 

SI 

NO 

NO 

Opera 

NO 

SI 

SI 


La sintaxis de la etiqueta es la siguiente. 


<video autoplay Controls loop muted p re I o a d="va I o r" s rc="va I o r" poster-'valor" 
width-'valor height="valor"> 

Texto para navegadores que no soportan video... 

</audio> 
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Entre los atributos de la etiqueta encontramos los siguientes. 

src 


El atributo permite especificar la dirección URL del recurso al cual se quiere 
acceder, siendo en este caso el archivo que contiene el video a cargar en el 
documento web. 

Se ha de especificar el archivo de video con el formato adecuado para el 
navegador donde se vaya a reproducir el video. 

Como esta opción no es predecible por el desarrollador y depende del 
usuario final. Se recomienda utilizar la etiqueta <source>, dentro de la etiqueta de 
video, para especificar diferentes formatos, de forma que el navegador utilizado 
cargue la primera que sea capaz de reconocer. 

autoplay 

El atributo permite especificar que el archivo de video sea reproducido 
automáticamente, al ser el archivo cargado por el navegador. 

Es un atributo booleano, por tanto para que se ejecute el video 
simplemente se ha de especificar el atributo en la etiqueta. 

Controls 

El atributo es booleano, por lo que al ser especificado en la etiqueta, 
permite que se visualicen los controles de control de video, entre los que se 
encuentran, el botón de reproducción, pausa, búsqueda y volumen, pantalla 
completa, subtítulos y pista. 

loop 

Si se especifica el atributo, el archivo de video es reproducido 
automáticamente en modo bucle, cuando finalice el video volverá a empezar de 
nuevo. 

muted 


Al especificar el atributo, el archivo de video será cargado, pero se activara la 
opción de silenciar el audio. 

preload 

El atributo tiene tres valores posibles valores: none, auto y metadata. El 
atributo permite definir si se realiza una precarga inicial del archivo de video. 
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Si se especifica el valor none , no se realiza ningún tipo de precarga y se 
espera que el usuario sea el que active el video pulsando sobre el control 
correspondiente. 



Si se indica el valor auto, se realiza la precarga completa del archivo de 
video, para que la reproducción sea más homogénea y no se produzcan paros o 
saltos en la misma. Se ha de utilizar si no se compromete la velocidad de descarga 
entre el cliente y servidor. 


height 

El atributo permite especificar el alto del video que se quiere reproducir, 
expresando el valor en pixeles. 


width 


El atributo permite especificar el ancho del video que se quiere reproducir, 

expresando el valor en pixeles. 

Se ha de tener en cuenta que para realizar una carga correcta del formato de video, 
se habría de utilizar la etiqueta < source >, la cual permite realizar la carga del archivo de 
video en varios formatos, visualizando así el navegador el primer archivo compatible. 

Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de 
especificar, cuando se utilice la misma. 

Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al 
archivo de video. Y otro atributo denominado type , el cual se utiliza para indicar el tipo 
MIME del archivo que se quiere reproducir. Entre los posibles tipos a utilizar por este 
último atributo se encuentran los siguientes: 


Valor MIME 

Audio/Video 

video/ogg 

Video 

video/mp4 

Video 

video/webm 

Video 


El siguiente ejercicio muestra el uso de la etiqueta en un documento web. 


<!DOCTYPEHTML> 

<html> 
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HTML. 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta ñame-'description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content-Vvww.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<video width="320" height="240" controls> 

<source src="hoy.mp4" type="video/mp4"> 

<source src-’hoy.ogg" type="video/ogg"> 

Su Navegador NO SOPORTA la etiqueta VIDEO. 

</video> 

</body> 

</html> 


El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 
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Etiqueta <TRACK> 



La etiqueta <track>, permite especificar subtítulos “pistas de texto”, a los 
elementos de video y audio. 

Para realizar la visualización de los mismos esta etiqueta permite la inclusión de 
archivos especiales que contienen el texto que se ha de visualizar mientras se reproducen 
los archivos multimedia. 

La etiqueta se ha de incluir en el contenido de una de las etiquetas multimedia para 
audio o video. 

La sintaxis de la etiqueta es la siguiente. 

<Etiqueta Multimedia> 

<track default kind-'valor" label-'valor" src-'valor" srclang="valor"> 

</Etiqueta Multimedia> 

Como se puede observar la etiqueta no tiene etiqueta de cierre. 

Los atributos de la etiqueta <track> son los siguientes: 

src 


El atributo permite especificar la dirección URL del recurso al cual se quiere 
acceder, siendo en este caso el archivo que contiene el texto que se quiere utilizar 
como subtítulos. 

El formato de archivo que se suele cargar es .vtt (“video track text”), es un 
formato especial de archivo el cual comentaremos más adelante. 

default 


El atributo default permite especificar cuál es el archivo de subtítulos por 
defecto que se ha de visualizar, en caso de existir varios archivos de subtítulos. 

Es un atributo booleano, por tanto con solo especificar el atributo en la 
etiqueta el mismo es aplicado. 

label 


El atributo permite especificar entre comillas, el titulo para la pista de texto 
que se está cargando. 
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kind 


El atributo permite especificar según el valor que se indique varias opciones 
posibles para las pistas de texto que se desean cargar. Entre los posibles valores se 
encuentran los siguientes. 


Valor 

Descripción 

captions 

Define la traducción de diálogos y efectos de 
sonido. (Aptos para personas con discapacidad 
auditiva.) 

chapters 

Define títulos de capítulos. Recomendable para 
navegación por recursos multimedia. 

descriptions 

Define una descripción textual del video que se está 
reproduciendo. 

metadata 

Define contenido usado por scripts. 

subtitles 

Define subtítulos. Utilizado para visualizar los 
subtítulos en un video. 


srclang 


El atributo define en su valor, utilizando los códigos de lenguaje, el lenguaje 

utilizado en la pista de texto. El atributo es obligatorio si se utiliza en el atributo 

kind, el valor subtitles. 

El archivo de pista de texto o subtítulos que se puede utilizar, es muy fácil de crear, 
ya que es un archivo de texto plano, en el cual la primera línea ha de ser. 

WEBVTT 

Y a continuación se añade en el archivo un salto de línea y lo que se denominan 
“cues”, que podemos definir como los intervalos de tiempo, en los cuales se ha de 
visualizar el texto de los subtítulos durante la reproducción del archivo multimedia. 

Para crear un “cue” se ha de especificar un id , saltar a la línea siguiente y especificar 
a continuación un rango de tiempo con el formato siguiente: 

Correspondiéndose el primer valor a inicio y el segundo a final, separados por 
espacios en blanco y dos guiones con un símbolo de mayor. 

Saltar de línea nuevamente y especificar la línea de texto que se quiere visualizar. 
Una vez escrita la misma, se ha de dejar una línea en blanco, para poder escribir el 
siguiente “cue”. 
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Este sería un ejemplo de archivo de subtítulos con espacios de tiempo definidos en 
dos “cues”. 


WEBVTT 

1 

00 : 00 : 01.000 -> 00 : 00 : 10.000 
Primera línea de texto de los subtítulos. 

2 

00:00:15.000 -> 00:00:20.000 
Segunda línea de texto 
En dos líneas. 

... Así sucesivamente se ¡rían añadiendo periodos de tiempo y subtítulos... 


El siguiente ejemplo muestra el uso de la etiqueta <track> en un documento 
web, visualizando subtítulos en la reproducción de un video. 


<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 
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<videowidth="640" height="480" controls> 

<source src="hoy.mp4" type="vldeo/mp4"> 

<tracksrc="subtitulos.vtt" kind-'subtitles" srclang="es" label-'Spanlsh" /> 
Su Navegador NO SOPORTA la etiqueta VIDEO. 

</video> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente. 



*) Ejercicios prácticos HTML x 


4* C Ü localhost/ejerc¡cioshtml5/dase.html = 

Aplicaciones C3 aprendoencasa.com CU Nueva carpeta CU Otros marcadores 


4 


I 



Tengo marcado en el pecho todos los dias que el tiempo no me dejo estar aquí. 
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Etiqueta <EMBED> 



La etiqueta <embed>, permite definir un contenedor para insertar una aplicación 
externa o un contenido interactivo. 

Es una etiqueta que no dispone de etiqueta de cierre por lo tanto solo se ha de 
utilizar la de apertura, especificando los atributos dentro de la misma. 

La sintaxis de la etiqueta es la siguiente. 

<embed src-'valor" type-'valor" width-'valor" height-'valor" > 

La etiqueta hace uso de los siguientes atributos. 

src 


El atributo permite especificar la dirección URL del recurso al cual se quiere 
acceder, siendo en este caso el archivo que contiene el objeto, animación, etc. Que 
se quiere utilizar. 


type 

Sirve para especificar el tipo MIME del documento con el que se está 
realizando el enlace. Se pueden consultar los tipos mime en la siguiente dirección: 

http://www.iana.org/assignments/media-types 

La sintaxis para definir esta etiqueta con el atributo types es la siguiente: 

<embed src-'valor" type="ValorMime"> 

Entre los tipos se puede encontrar el de objetos como flash “application/x- 
shockwave-flash”, entre otros. 

width 


El atributo permite especificar el ancho que ha de tener el contenedor del 
objeto que se quiere insertar, expresando el valor en pixeles. 

height 

El atributo permite especificar el alto que ha de tener el contenedor del 
objeto que se quiere insertar, expresando el valor en pixeles. 
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El siguiente ejemplo muestra el uso de la etiqueta en un documento web, 
visualizando una animación realizada en flash. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta ñame-’generator" contenrtvw.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<header> 

<p>lnserción de objeto embebido FLASH</p> 

</header> 

<embed src="header.swf" type="application/x-shockwave-flash"> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente. 
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Etiqueta <OBJECT> 



La etiqueta <object>, permite definir la inserción de un objeto incrustado dentro 
del documento web. Se utiliza para insertar elementos multimedia como audio, video, 
applets de java, activex, pdf y flash. 

También es posible utilizar la etiqueta para insertar otras páginas web, dentro del 
propio documento. Y si se quisieran pasar parámetros a los objetos incrustados se podría 
utilizar la etiqueta <param >, que permite realizar esta acción. 

El texto que se pueda teclear en el contenido de la etiqueta, se utiliza para expresar 
información sobre el navegador, indicando que no es capaz de reproducir el objeto. 

La sintaxis de la etiqueta es la siguiente. 

<object data-'valor" wldth-'valor" height-'valor" ñame-'valor" type="valor" 

usemap-'valor" > 

Texto alternativo para navegadores que no soporten la reproducción... 

</object> 

Los atributos que puede utilizar la etiqueta son los siguientes: 

width 


El atributo permite especificar el ancho que ha de tener el contenedor del 
objeto que se quiere insertar, expresando el valor en pixeles. 

height 

El atributo permite especificar el alto que ha de tener el contenedor del 
objeto que se quiere insertar, expresando el valor en pixeles. 

data 


El atributo permite especificar la dirección URL del recurso al cual se quiere 
acceder, siendo en este caso el archivo que contiene el objeto, animación, etc. Que 
se quiere utilizar. 

ñame 


El atributo permite especificar el nombre que se quiere aplicar al objeto 
insertado, para de esta forma poder referenciarlo posteriormente, si se utilizara 
algún lenguaje de cliente. 
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type 

Sirve para especificar el tipo MIME del documento con el que se está 
realizando el enlace. Se pueden consultar los tipos mime en la siguiente dirección: 

http://www.iana.org/assignments/media-types 

La sintaxis para definir esta etiqueta con el atributo types es la siguiente: 

<object data-'valor" type-'ValorMime" > 

Entre los tipos se puede encontrar el de objetos como flash “application/x- 
shockwave-flash”, entre otros, consulte los tipos correspondientes al objeto a 
insertar en el enlace proporcionado anteriormente. 


El siguiente ejemplo hace uso de la etiqueta en un documento web, 
insertando un objeto de tipo flash. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-Vww.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<header> 

<p>lnserción deobjeto</p> 

</header> 

<object width="400" height="200" data="header.swf"></object> 

</body> 

</html> 
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El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
siguiente imagen. 



2 Ejercicios prácticos HTML x 




Ejercicios 6 


I o Realizar un sitio web compuesto de tres páginas, las cuales estén enlazadas 
entre ellas, en las que se muestren ejemplos de inserción de video, audio, y algún objeto, 
así como también incluyan etiquetas vistas hasta el momento como pueden ser de 
estructura o semánticas, imágenes, tablas, listas, etc. 
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Etiqueta <FORM> 


Formularios en HTML 

La etiqueta <form>, permite definir un formulario de datos, utilizados para 
traspasar datos al servidor. 

Un formulario puede contener a su vez, elementos de entrada como pueden ser 
campos de texto, casillas de verificación, botones de radio, botones de envió, listas de 
selección, areas de texto, etc. 

Los formularios permiten que el usuario pueda introducir datos en el documento 
web, para que posteriormente estos datos sean enviados y tratados por el servidor, para 
almacenarlos en una base de datos, interactuar con el usuario, geolocalización, etc. 

La etiqueta tiene la siguiente sintaxis. 


<form accept-charset-'valor" action-'valor" autocomplete-'valor" enctype-'Valor" 
method-'valor" name="valor" novalidate target="valor"> 

Etiquetas de control de petición de datos del formulario... 

</form> 


Los atributos que puede utilizar la etiqueta son los siguientes: 

accept-charset 

Este atributo permite establecer el conjunto de caracteres que ha de utilizar 
el formulario para el envió de información al servidor. Si no se establece el atributo 
se toma por defecto el valor “UNKNOWN” (“Desconocido”), el cual aplica el 
conjunto de caracteres que tenga aplicado el documento web. 

La sintaxis para definir esta etiqueta con el atributo accept-charset es la 
siguiente: 
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<form accept-charset = "conjunto de caracteres "> 
Contenido del formulario... 

</form> 


Los conjuntos de caracteres que más se suelen utilizar son UTF-8 y ISO- 
8859-1, que se corresponden con la codificación Unicode y el juego de caracteres 
para el alfabeto Latín. 

El siguiente ejemplo establece un juego de caracteres Unicode para el formulario. 


<html> 

<head> 

<titl e>Aprendo en casa, Ejercidos //7M</title> 

<meta charset-W-S"> 

</head> 

<body> 

<form accept-charset-'UTF-8" action-'recepción.php"> 
<label>Nombre</label> 

<input type-'text" name="nombre"> 
<inputtype="submit" ñame-'enviar" valué-'enviar"> 
</form> 

</body> 

</html> 


action 


El atributo permite especificar donde han de ser enviado los datos del 
formulario, cuando este es enviado. 

Normalmente suele ser un documento web, escrito en un lenguaje de 
programación de servidor, el cual se encarga de procesar los datos. 

Se ha de especificar la ruta relativa o absoluta al recurso encargado de 
procesar la información. 

La sintaxis de la etiqueta con el atributo es la siguiente. 
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<form accept-charset-'valor" action="URL"> 

Contenido del formulario... 

</form> 

El siguiente ejemplo muestra el uso del atributo en un documento web, 
enviando los datos a un archivo php que encargaría de procesar la información del 
formulario. 

<form accept-charset="UTF-8" action="recepcion.php"> 

<label>Nombre</label> 

<¡nput type-'text" name="nombre"> 

<¡nput type-'submit" ñame-'enviar" valué-'enviar"> 

</form> 

autocomplete 

El atributo especifica que el formulario pueda utilizar las entradas de datos 
anteriores que pueda haber realizado el usuario, para autocompletar los campos 
que son solicitados por el formulario. 

Se puede establecer como valores posibles on, que indica la activación. Y off 
, indicando que el auto completado estaría desactivado. 

Si se establece el valor del atributo como activado, se pueden indicar 
campos del formulario como desactivados y viceversa. 

La sintaxis del atributo es la siguiente. 

<form accept-charset-'valor" action-'URL" autocomplete="valor"> 

Contenido del formulario... 

</form> 

El siguiente ejemplo muestra el uso del atributo. 

<form accept-charset="UTF-8" action-'recepcion.php" autocomplete-'on"> 
<label>Nombre</label> 

<¡nput type-'text" name="nombre"> 

<¡nput type-'submit" ñame-'enviar" valué-'enviar"> 

</form> 
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enctype 

El atributo permite especificar como han de ser codificados los datos del 
formulario, cuando este es enviando. Solo se debe utilizar cuando el atributo 
method, tiene asignado un valor “POST”. 

Los posibles valores para el atributo son los siguientes: 


Valor 

Descripción 

application/x-www-form-urlencoded 

Es el valor predeterminado por 
defecto. Todos los caracteres 
son codificados, los espacios 
en blanco son convertidos en 
símbolos “+”, y los caracteres 
especiales, convertidos a sus 
valores hexadecimales en 

ASCII. 

multipart/form-data 

Los datos no son codificados, 
se ha de utilizar cuando se 
envíen archivos asociados al 
formulario, con el control de 
carga de archivos. 

text/plain 

Los datos son codificados, 
convirtiendo los espacios en 
blanco en símbolos “ + ”, 
mientras que los caracteres 
especiales no son convertidos. 


El siguiente ejemplo muestra el uso del atributo. 


<form action-'procesar_datos.php" method-'post" enctype="multipart/form-data"> 
Nombre: <¡nputtype="text" name="nombre"><br> 

Apellidos: <inputtype="text" name="apellldos"><br> 

<input type="submit" value="enviar"> 

</form> 
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method 

El atributo permite especificar la forma o método de envió de los datos 
contenidos en el formulario. 

Los valores para el atributo son GET , o POST. 

El primer valor del atributo, el valor GET, envía los datos del formulario 
utilizando la url, por lo tanto los datos son añadidos a la dirección url mediante 
valores tipo nombre/valor, no se recomienda utilizar este método cuando los datos 
son sensibles a la seguridad, ya que los valores son mostrados en la barra de 
direcciones del navegador. Y también la cantidad de información que se puede 
enviar por este método está limitada cerca de los 3000 caracteres. 

El segundo valor del atributo, el valor POST, por el contrario no tiene 
limitación de tamaño y los datos son enviados dentro de la petición HTTP, del 
atributo action. Por lo tanto los datos no son visibles en su envió y la seguridad de 
los mismos se mantiene intacta. 

El siguiente ejemplo muestra el uso del atributo en un formulario. 

<form action="procesar_datos.php" method="post"> 

Nombre: <¡nputtype="text" name="nombre"><br> 

DNI: <¡nputtype="text" name="apellidos"><br> 

<¡nput type-'submit" valué-'enviar"> 

</form> 


ñame 


El atributo permite especificar el nombre que se quiere asignar al formulario 
o los datos que se solicitan en el mismo. El nombre puede ser utilizado 
posteriormente bien por lenguajes clientes, para interactuar con el formulario, bien 
con lenguajes de servidor para procesar los datos recibidos. 

El siguiente ejemplo muestra el uso del atributo aplicado al formulario y 
datos del mismo. 


<form action-'envio_datos.php" method-'get" name="Formular¡o1"> 
Nombre: <¡nputtype="text" name="nombre"><br> 

Dirección: <¡nputtype="text" name="direccion"><br> 

<input type-'submit" valué-'enviar" ñame-'enviar"> 

</form> 
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novalidate 

El atributo permite especificar que los datos del formulario no sean 
validados, según las características de los campos utilizados en el formulario, de esta 
forma el formulario envía los datos sin realizar ningún tipo de comprobación sobre 
los datos. 

Es un atributo booleano, por lo tanto su aparición en la etiqueta de 
formulario, hace que se active el mismo. 


El siguiente ejemplo muestra el uso del atributo. 


<form action="envio_datos.php" method-'get" name-'Formulariol 
Nombre: <inputtype="text" name="nombre"><br> 

Dirección: <¡nputtype="text" name="direccion"><br> 
<¡nputtype="submit" valué-'enviar" name="enviar"> 

</form> 

' novalidate> 

target 


El atributo permite especificar el destino por defecto para todos los enlaces 
y formularios del documento web. 

La sintaxis para definir la etiqueta con el atributo target es la siguiente: 

<a href="valor"" target="va 1 or">Texto del enlace</a> 


Entre los posibles valores que se le pueden aplicar al atributo target, 
encontramos los siguientes: 


target 

Descripción 

Jblank 

Especifica que el destino sea una nueva ventana 
del navegador, o una nueva pestaña. 

_self 

Por defecto. Abre el destino en el mismo lugar 
donde se haya realizado el clic. 

parent 

Abre el destino en un marco asociado. 

_t°p 

Abre el destino ocupando todo el cuerpo de la 
ventana. 

framename 

Abre el destino en el marco del cual se 
especifica el nombre. 


El siguiente ejemplo muestra el uso del atributo target en un formulario. 
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<form action="graba_datos.php" method-'get" target-'_blank"> 
Nombre: <inputtype="text" name="nombre"><br> 
Dirección: <input type="text" name="direccion"><br> 
<input type="submit" value="Enviar" name="enviar"> 
</form> 


Etiqueta <INPUT> 


Formularios HTML, Petición de datos 

La etiqueta <input>, es una de las etiquetas más importante para la solicitud de 
datos mediante formularios, ya que es la que permite especificar los tipos de datos que se 
quieren solicitar para su posterior envió. 

La etiqueta permite mediante uno de sus atributos especificar el tipo de dato a 
solicitar, de forma que se pueda componer un formulario que solicite los datos acordes a 
una estructura idónea para la recepción de los mismos por parte del servidor. 

También establece las reglas de validación de los datos, de forma que se reduce 
considerablemente por parte del programador, el análisis de los datos enviados para su 
posterior corrección en caso de ser incorrectos. 


La sintaxis de la etiqueta es la siguiente. 


<¡nput accept-'valor" alt="valor" autocomplete-'Valor" autofocus checked disabled 
form-'valor" formaction-'valor" formenctype-'valor" formmethod- 1 Valor" 
formnovalidate formtarget-'valor" height-'valor" list-'valor" max-'valor" min-'valor" 
múltiple name-'valor" pattern-'valor" placeholder-'valor" readonly required 
size-'valor" src-'valor" step-'valor" valué-'valor" width="valor"type="valor"> 


Entre sus atributos encontramos los siguientes. 
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accept 

El atributo se utiliza específicamente para los datos de entrada de tipo file, y 
permite especificar los tipos de archivos que acepta el servidor que recibe los datos. 
No realiza la validación de los archivos enviados comprobando su tipo y es en la 
recepción de los mismos donde se habría de procesar su tipo correcto. 

La sintaxis del atributo es la siguiente. 

<¡nputtype="file"accept="valor"> 


Los posibles valores para el atributo son los siguientes: 


Valor del atributo 

Descripción 

audio/* 

Todos los archivos de audio son aceptados. 

video/* 

Todos los archivos de video son aceptados. 

image/* 

Todos los archivos de imagen son aceptados. 

MIME Tipo 

Se ha de especificar un valor de tipo MIME, sin 
parámetros. Consultar los tipos MIME en el 
enlace proporcionado anteriormente en el libro. 


El siguiente ejemplo muestra el uso del atributo en un formulario, que solicita un 
archivo de tipo imagen. 


<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="graba_datos.php" method-'post" enctype="multipart/form-data"> 
Nombre: <¡nputtype="text" name="nombre"><br> 
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Dirección: <inputtype="text" name="direccion"><br> 

Fotografía: <input type="file" ñame-'fotografía" accept="image/*"><bp 
<input type="submit" value="Enviar" name="enviar"> 

</form> 

</body> 

</html> 

El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 



alt 


El atributo alt, permite especificar un texto alternativo para la imagen. Este 
texto alternativo es visualizado cuando se produce un error en el atributo src, la 
conexión fuese muy lenta o si el usuario utiliza un lector de pantalla. 

Se puede especificar siempre y cuando el tipo de dato que se solicita, sea de 
tipo image, según se haya especificado en el atributo type. 

La sintaxis del atributo es la siguiente. 

<inputtype-'image" alt-'Texto alternativo'^ 

El siguiente ejemplo muestra el uso del atributo en un formulario, que entre 
sus datos hay un tipo imagen. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" content-'José Sáez"> 
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<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content-Vvww.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="graba_datos.php" method="post"> 

Nombre: <input type="text" name="nombre"><bp 
Dirección: <¡nputtype="text" name="direccion"><br> 

<input type="image" src="enviar.png" alt="Enviar datos del formulario."> 

</form> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al que se muestra en 
la imagen siguiente. 



autocomplete 

El atributo especifica que el dato solicitado pueda utilizar las entradas de 
datos anteriores que pueda haber realizado el usuario, para autocompletar el campo 
que se está solicitando. 

Se puede establecer como valores posibles on, que indica la activación. Y off 
, indicando que el auto completado estaría desactivado. 

La sintaxis del atributo es la siguiente. 

<¡nput type="valor" autocomplete> 
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El siguiente ejemplo muestra el uso del atributo en un formulario. 


<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="enviar.php" autocomplete="on"> 

Nombre: <¡nputtype="text" name="nombre"><br> 

Apellidos: <input type="text" name="apellidos"><br> 

E-mail: <¡nputtype="email" ñame-'email" autocomplete-'off"><br> 

<input type="submit"> 

</form> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 
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autofocus 

El atributo permite especificar cuál es el control que recibe el “foco”, 
cuando se realiza la carga del documento web en el navegador. Es un atributo 
booleano y solo con aparecer significa que está activado. 

Se ha de tener en cuenta que este atributo solo se puede especificar en un 
solo dato dentro del formulario, ya que el cursor se ha de situar en el mismo cuando 
se produzca la carga de la página, y como es lógico no se puede situar el cursor en 
varios sitios a la vez. 

La sintaxis del atributo es la siguiente. 

<¡nputtype="valor" ñame-'valor" autofocus /> 

El siguiente ejemplo muestra el uso del atributo en un formulario. 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-’utf-8"> 

<meta ñame-’author" content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'enviar.php" autocomplete-'on"> 

Nombre: <¡nputtype="text" name="nombre"><br> 

Apellidos: <input type="text" ñame-'apellidos" autofocus><br> 

<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 
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El ejercicio anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 



checked 

El atributo se puede utilizar en el caso de que en el atributo type, se haya 
especificado un tipo de dato checkbox, o radio. Y permite especificar que el campo 
sobre el cual se aplica aparezca inicialmente marcado, cuando se realiza la carga del 
documento web. 

La sintaxis del atributo es la siguiente. 

<input type-'checkbox | radio" checked > 

El siguiente ejemplo muestra el uso del atributo en un formulario. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-’utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="enviar.php" autocomplete="on"> 

Nombre: <input type="text" name="nombre"><br> 

Apellidos: <input type="text" name-'apellidos"autofocus><br> 
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Vehículo:<br> 

<inputtype="checkbox" name-'vehiculo" valué-'Bicicleta "> Bicicleta<br> 
<input type-'checkbox" name="vehiculo" valué-'Coche" checked> Coche<bp 
<inputtype="submit" ñame-'enviar" value="enviar"> 

</form> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 



m Ejercicios prácticos HTML x 



disabled 


El atributo especifica que el elemento sobre el que se aplica, se ha de 
desactivar. Un elemento desactivado está bloqueado y no se puede cambiar ni 
realizar clic sobre el mismo. 

Es un atributo booleano con lo cual simplemente para activar la opción se 
ha de incluir en la etiqueta. 

La sintaxis del atributo es la siguiente. 

<input type="valor" disabled> 

El siguiente ejemplo muestra el uso del atributo en un formulario. 

<!DOCTYPE HTML> 

<html> 

<head> 

<tltle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 
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<meta name-'author" contení-'José Sáez"> 

<meta name="description" content="Ejerc¡cios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="enviar.php" autocomplete="on"> 

Nombre: <¡nputtype="text" name="nombre" disabled><br> 

Apellidos: <inputtype="text" ñame-'apellidos" autofocus><br> 
<inputtype="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 

El ejercicio anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 



form 


El atributo permite especificar a qué formulario pertenece el campo que se 
está solicitando especificando el atributo identificador del formulario. De esta forma 
se puede situar un campo incluso fuera del formulario, pero indicando que 
pertenece a un formulario concreto, de manera que cuando los datos son enviados, 
se envía también el dato situado fuera del formulario. 

La sintaxis del atributo es la siguiente. 

<input type="valor" form="ldentificador_del_formulario"> 

El siguiente ejemplo muestra el uso del atributo en un formulario. 
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<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 
</head> 

<body> 

<form action-'enviar.php" autocomplete-’on" id="formulario1" name="formulario1" 
method="get"> 

Nombre: <¡nputtype="text" ñame-'nombre" form="formulario1 "><br> 

Apellidos: <inputtype="text" name="apellidos" form="formulario1 "><br> 

<input type="submit" ñame-'enviar" value="enviar" form="formulario1 "> 

</form> 

<br> 

Teléfono: <input type="text" ñame-'telefono" form="formulario1 "> 

<br> 

</body> 

</htmi> 


El resultado del ejercicio anterior ha de ser similar al que muestra en la imagen 
siguiente. 
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formaction 

El atributo permite especificar una URL distinta de envió, sobrescribiendo la 
que aparece en el atributo action, del formulario. De esta forma es posible situar 
diferentes botones de envió de formulario, enviando los datos a diferentes sitios 
según se pulse un botón u otro. 

El atributo se ha de utilizar cuando el atributo type , del campo tenga un 
valor submit, o image. 

La sintaxis del atributo es la siguiente. 

<input type-'submit | image" formaction-'URL Destino" > 

El siguiente ejemplo muestra el uso del atributo en un formulario. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-’utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="get" id="formulario1" > 

Nombre: <input type="text" name="nombre"><br> 

Apellidos: <inputtype="text" name-'apellidos"><br> 

<input type-'submit" valué-'Enviar" /> 

<input type="submit" formaction-'envio_admin.php" value="Enviar Administración"> 

</form> 

</body> 

</html> 
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El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la 
imagen siguiente. 




formenctype 


El atributo permite especificar como han de ser codificados los datos del 
formulario, cuando este es enviando. Se aplica solo a botones de formulario de tipo 
submit o image. Solo se debe utilizar cuando el atributo method, tiene asignado un 
valor “POST”. El atributo sobrescribe el método de envió del formulario, 
permitiendo enviar según el botón de envió que se pulse con un método de 
codificación diferente a distintos sitios. 


Los posibles valores para el atributo son los siguientes: 


Valor 

Descripción 

application/x-www-form-urlencoded 

Es el valor predeterminado por 
defecto. Todos los caracteres 
son codificados, los espacios 
en blanco son convertidos en 
símbolos “ + ”, y los caracteres 
especiales, convertidos a sus 
valores hexadecimales en 

ASCII 

multipart/form-data 

Los datos no son codificados, 
se ha de utilizar cuando se 
envíen archivos asociados al 
formulario, con el control de 
carga de archivos. 
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text/plain 

Los datos son codificados, 
convirtiendo los espacios en 
blanco en símbolos “+”, 
mientras que los caracteres 
especiales no son convertidos. 

La sintaxis del atributo es la siguiente. 


<¡nput type="submit | image" formenctype-'valor" > 


El siguiente ejemplo muestra el uso del atributo en un formulario. 

<!D0CTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="descr¡pt¡on" content="Ejerc¡cios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

</head> 

<body> 

<form action="envio.php" method="get" id="formulario1" > 

Nombre: <¡nput type="text" name="nombre"><br> 

Apellidos: <input type="text" name="apellidos"><br> 

<input type-'submit" valué-'Enviar" /> 

<input type-'submit" formaction="envio_admin.php" formenctpe-'multipart/form- 
data" value="Enviar Administración"> 

</form> 

</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la imagen 
siguiente. 
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formmethod 

El atributo permite especificar la forma o método de envió de los datos 
contenidos en el formulario. 

Los valores para el atributo son GET, o POST. Sobrescribe el método de 
envió asignado al formulario, según el botón sobre el cual se pulse, se acepta el 
atributo en botones de envió del tipo submit o image. 

Las reglas de envió dependiendo del valor del atributo get o post, son las 
mismas comentadas en el atributo method, de la etiqueta <form >. 

La sintaxis del atributo es la siguiente. 

<input type-'submit | image" formmethod-'valor" > 

El siguiente ejemplo muestra el uso del atributo en un formulario. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 
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<body> 

<form action-'envio.php" method-'get" id="formulario1" > 

Nombre: <¡nputtype="text" name="nombre"><br> 

DNI: <input type="text" name="apellidos"><br> 

Usuario: <inputtype="text" name="usuario"><br> 

Password: <¡nputtype="password" name="contrasena"><br> 

<input type-'submit" valué-'Enviar" /> 

<input type="submit" formaction="envio_admin.php" formmethod-'post" 
value="Env¡arAdmin¡strac¡ón"> 

</form> 

</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



formnovalidate 

El atributo permite especificar que los datos del formulario no sean 
validados, según las características de los campos utilizados en el formulario, de esta 
forma el formulario envía los datos sin realizar ningún tipo de comprobación sobre 
los datos. 

El atributo se ha de utilizar sobre campos de tipo submit o image, y se 
superpone sobre el atributo aplicado al formulario, permitiendo así la posibilidad de 
incluir botones de envió de datos, los cuales no hagan validación de datos en el 
envió. 
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Es un atributo booleano, por lo tanto con solo su aparición en la etiqueta 
sobra para activarlo. Aunque también es posible utilizar otras formas de sintaxis para 
el mismo, en el ejemplo se muestra una variante adaptada a XHTML. 


La sintaxis del atributo es la siguiente. 


<¡nputtype="submit|image" formnovalidate="formnovalidate" > 


El siguiente ejemplo muestra el uso del atributo en un formulario. 


<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="get" id="formulario1" > 

Nombre: <¡nputtype="text" name-'nombre"><br> 

DNI: <¡nputtype="text" name="apellidos"><br> 

Usuario: <¡nputtype="text" name="usuario"><br> 

Password: <¡nputtype="password" name="contrasena"><br> 

<input type="submit" valué-'Enviar" /> 

<input type-'submit" formaction="envio_admin.php" 
formnovalidate-'formnovalidate" value="Enviar Sin Validación"> 

</form> 

</body> 

</html> 
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El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



formtarget 

El atributo permite especificar el destino por defecto para todos los enlaces 
y formularios del documento web. El atributo se ha de aplicar a campos de tipo 
envió datos como submit o image, y sobrescribe el destino aplicado al formulario 
con el atributo target. 

La sintaxis para definir la etiqueta con el atributo target es la siguiente: 

<¡nputtype="submit| image" formtarget-'valor"> 

Entre los posibles valores que se le pueden aplicar al atributo formtarget, 
encontramos los siguientes: 


target 

Descripción 

Jblank 

Especifica que el destino sea una nueva ventana 
del navegador, o una nueva pestaña. 

_self 

Por defecto. Abre el destino en el mismo lugar 
donde se haya realizado el clic. 

parent 

Abre el destino en un marco asociado. 

_t°p 

Abre el destino ocupando todo el cuerpo de la 
ventana. 

framename 

Abre el destino en el marco del cual se 
especifica el nombre. 


El siguiente ejemplo muestra el uso del atributo en un formulario. 
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<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envio.php" method="get" id="formulario1" target="_self"> 
Nombre: <inputtype="text" name-'nombre"><br> 

DNI: <input type="text" name-'apellidos"><br> 

Usuario: <input type="text" name="usuario"><br> 

Password: <input type="password" name="contrasena"><br> 

<input type-'submit" valué-'Enviar" /> 

<input type-'submit" formaction="envio_admin.php" formta rget="_blank" 
valué-'Enviar nueva ventana"> 

</form> 

</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 


_ □ 


& Ejercicios prácticos HTML x 


C Q localhosVd erc ' c ' os html5/clase.htnnl 

A 

III 

■i; Aplicaciones Q aprendoencasa.com Q Nueva carpeta 

r~l Otros marcadores 

Nombre: 


DNI: 


Usuario: 


Password: 


Enviar Enviar nueva ventana 
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El atributo height , permite especificar el alto de la imagen en pixeles. El 
atributo se aplica solo a campos de tipo image, y se suelen utilizar para los botones 
de envió del formulario cuando en lugar de botones normales se quiere visualizar 
iconos o imágenes representativos del envió de datos. 

Siempre que se especifique el ancho y alto de la imagen, el navegador 
reservara el espacio correspondiente para la imagen cuando se produzca la carga del 
documento. 

La sintaxis del atributo es la siguiente. 

<¡nputtype="image" height-'Valor En Pixeles"> 

El siguiente ejemplo muestra el uso del atributo en un formulario. 


<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="get" id="formulario1" target="_self"> 
Nombre: <input type="text" name-'nombre"><br> 

Apellidos: <input type="text" name="apellidos"><br> 

<input type="image" src-'enviar.png" height-'128"> 

</form> 

</body> 

</html> 
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El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



width 

El atributo width, permite especificar el ancho de la imagen en pixeles. El atributo se 
aplica solo a campos de tipo image, y se suelen utilizar para los botones de envió 
del formulario cuando en lugar de botones normales se quiere visualizar iconos o 
imágenes representativos del envió de datos. 

Siempre que se especifique el ancho y alto de la imagen, el navegador 
reservara el espacio correspondiente para la imagen cuando se produzca la carga del 
documento. 

La sintaxis del atributo es la siguiente. 

<input type="image" width-'Valor En Pixeles"> 

El siguiente ejemplo muestra el uso del atributo en un formulario. 

<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author 1 ' contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
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HTML5"> 

<meta ñame-’keywords" content="Ejerc¡c¡os, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method-'get" id="formulario1 11 target="_self"> 

Nombre: <¡nputtype="text" name-'nombre"><br> 

Apellidos: <¡nputtype="text" name="apellidos"><br> 
<inputtype="image"src="enviar.png" helght="128" width-'l 00"> 

</form> 

</body> 

</html> 

El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



ñame 


El atributo permite especificar el nombre que se quiere asignar al campo del 
formulario. El nombre puede ser utilizado posteriormente bien por lenguajes 
clientes, para interactuar con el formulario, bien con lenguajes de servidor para 
procesar los datos recibidos. 

La sintaxis del atributo es la siguiente. 

<input type-'valor" ñame-'NombreCampo"> 

El siguiente ejemplo muestra el uso del atributo en un formulario. 
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<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="get" id="formulario1" target-'_self"> 

Nombre: <input type="text" name-'nombre"><br> 

Fecha Nacimiento: <inputtype="date" name="fecha_nacimiento"><br> 

<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 

El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



readonly 

El atributo permite especificar que un campo sea de solo lectura, es decir su 
contenido será visible y podrá ser seleccionado, pero no se podrá modificar. Se 
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suele utilizar en conjunto con lenguajes de programación de cliente, para alterar el 
valor de solo lectura, cuando se cumplan ciertas condiciones en los datos. 

Es un atributo booleano por tanto su sola aparición en la etiqueta hace que 
sea activado el atributo. 

La sintaxis del atributo es la siguiente. 

<input type-'valor" readonly> 

El siguiente ejemplo muestra el uso del atributo en un formulario de datos. 


<!D0CTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<script> 

function Activar() { 

document.getElementByld("marca").readOnly=!document.getElementByld("marca").rea 

dOnly; 

} 

</script> 

<form action="envio.php" method="get" id="formulario1" target="_self"> 

Nombre: <¡nput type="text" name="nombre"><br> 

Fecha Nacimiento: <input type="date" name="fecha_nacimiento"><br> 

Vehículo: <input type="checkbox" name="vehiculo" onclick="Activar()"><br> 

Marca: <inputtype="text" ñame-'marca" readonly id="marca"><br> 

<input type="submit" ñame-'enviar" value="enviar"> 

</form> 
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</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 


X 


B Ejercicios prácticos HTML x 



required 

El atributo aplicado a un campo permite especificar que la introducción de 
datos en el campo ha de ser obligatorio, es decir no se puede dejar en blanco. 

El atributo es booleano, por lo que simplemente su aparición en el campo 
lo activa. En caso de estar activado el atributo en campo y la validación también 
activa, si campo está vacío en el momento de su envió, se paraliza el envió y advierte 
de que el campo ha de rellenarse. 

El atributo se puede aplicar a campos de tipo texto, búsqueda, url, fechas, 
email, contraseñas, casillas de verificación, radios, números y ficheros. 

La sintaxis del atributo es la siguiente. 

<inputtype="valor" required> 

El siguiente ejemplo muestra el uso del atributo en un formulario de datos. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 
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<meta charset="utf-8"> 

<meta ñame-'author" content="José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method-'post" id="formulario1 "> 

Nombre: <input type="text" name="nombre"><br> 

Apellidos: <input type="text" name-'apellidos" required ><br> 

<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



placeholder 

El atributo permite especificar un texto de ayuda informativo sobre el 
contenido que ha de tener el campo. El texto se muestra cuando el campo está 
vacío y desaparece cuando se escribe algo en el mismo. 

El atributo se puede aplicar a campos de tipo texto, búsqueda, teléfono y 
correo electrónico. 

La sintaxis de la etiqueta es la siguiente. 
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<input type-'valor" placeholder-Texto descriptivo del contenido"> 

El siguiente ejemplo muestra el uso del atributo en un formulario. 

<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="post" id="formulario1 "> 

Nombre: <¡nputtype="text" name-'nombre" placeholder="Teclee nombre 
completo"><br> 

Email: <¡nput type-'email" ñame-'correo" placeholder-'Correo: xxx@xxx.xx"><br> 
<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 

El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 
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El atributo permite especificar el valor de un campo del tipo input. 

Si el atributo se aplica a elementos de tipo button, reset o submit, especifica el texto 
del botón. 

Si se aplica a elementos de tipo text, bidden, o password, especifica el valor del 
campo por defecto. 

Para campos de tipo radio, checkbox e image, especifica el valor asociado al campo 
y es obligatorio en los dos primeros. El atributo no se puede utilizar en campos de tipo file. 

La sintaxis del atributo es la siguiente. 

<input type-'valor" valué-Texto como valor del campo" > 

El siguiente ejercicio utiliza el atributo en un documento web. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-’utf-8"> 

<meta ñame-’author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envio.php" method="post" id="formulario1 "> 

Nombre: <¡nputtype="text" name="nombre" placeholder="Teclee nombre 
completo"><br> 

Email: <¡nput type="email" ñame-'correo" placeholder-'Correo: xxx@xxx.xx"><br> 
Localidad: <input type="text" ñame-'localidad" valué-’Elx" ><br> 

<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 











Curso de introducción al diseño Web - www.aprendoencasa.com 


213 



El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



B Ejercicios prácticos HTML x 



size 


El atributo permite especificar el ancho visible del campo en caracteres, de 
una etiqueta de tipo input, siempre que sea de tipo text, search, url, email o password. 

Aunque especifique el ancho visible de la caja del campo, este atributo no 
establece el número de caracteres máximos que puede tener el mismo. 


La sintaxis del atributo es la siguiente. 

<¡nput type-'valor" size-'Valor Numérico" > 

El siguiente ejemplo muestra el uso del atributo en un formulario de datos. 


<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 
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<body> 

<form action-'envio.php" method-'post" id="formulario1 "> 

Nombre: <¡nputtype="text" name-'nombre" placeholder="Teclee nombre completo" 
size="80"><br> 

Email: <inputtype="email" name="correo" placeholder-'Correo: xxx@xxx.xx" 
size="90"><br> 

Localidad: <¡nputtype="text" ñame-'localidad" value-'Elx" size="60" ><bp 
Teléfono: <inputtype="tel" name="telefono" placeholder-'Teléfono" size="15"><bp> 
<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



maxlength 

El atributo permite especificar el número de caracteres máximos que se 
permite teclear en una etiqueta de tipo input. 

La sintaxis del atributo es la siguiente. 

<inputtype="Valor" maxlength-'Valor Numérico" > 
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El siguiente ejercicio muestra el uso del atributo en un formulario de datos. 



<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envio.php" method-'post" id="formulario1"> 

Nombre: <input type="text" name-'nombre" placeholder-'Teclee nombre completo" 
maxlength="60" size="80"><br> 

Email: <¡nputtype="email" name="correo" placeholder-'Correo: xxx@xxx.xx" 
maxlength="50" size="90"><br> 

Localidad: <input type="text" name-'localidad" value="Elx" size="60" maxlength="60" 
><br> 

Teléfono: <inputtype="tel" name="telefono" placeholder="Teléfono" size="15" 
maxlength="12"><br> 

<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 
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El atributo src, permite especificar el origen de la imagen, para un campo de 
tipo image, es decir su ubicación, bien mediante una ruta absoluta o relativa. 

Las posibles formas de sintaxis para definir esta etiqueta con el 
atributo src son las siguientes: 

<input type-'image" src- 'URL Absoluta"> 

<input type-'image" src- 'URL Relativa"> 

El siguiente ejercicio muestra el uso del atributo en un formulario de datos. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-’utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="post" id="formulario1"> 

Nombre: <¡nputtype="text" name-'nombre" placeholder="Teclee nombre completo" 
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maxlength="60" size="80"><br> 

Email: <input type="email" name-'correo" placeholder-'Correo: xxx@xxx.xx" 
maxlength="50" size="90"><bn > <bp > 

<inputtype="image" src-'enviar.png" width="64" height="64" ><br> 

</form> 

</body> 

</htmi> 

El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



max, min, step 

Los siguientes atributos permiten especificar los valores mínimos, máximos 
y los intervalos de los valores numéricos o de fecha que se puede aplicar a un 
campo, siempre y cuando este sea de tipo number, range, date, datetime, 
datetime-local, month, time y week. 

Se ha de tener en consideración que para los campos que reflejan fechas, 
esta se ha de expresar en formato americano, es decir año, mes, dia. 

La sintaxis de los atributos es la siguiente. 

<¡nput type- 1 Valor" min-Valor Numérico" max-'Valor Numérico" step-'Valor 
Numérico" > 

El siguiente ejemplo muestra el uso de los atributos en un 
formulario de datos. 
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<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-’author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="post" id="formulariol"> 

Nombre: <¡nputtype="text" name-'nombre" placeholder="Teclee nombre completo" 
maxlength-'60" size="80"><br> 

Edad: <input type="number" name-'edad" min="18" max="78" step="1" id="edad" 
><br> 

Fecha Nacimiento: <input type="date" min-'1940-01-01" max="2013-01-01" ><bp 
Puntuación: <¡nputtype="number" min="0" max="20" step="2" valué-'0" 
ñame-'puntuación" ><br> 

<input type="submit" ñame-'enviar" valué-'enviar datos"> 

</form> 

</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 
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múltiple 

El atributo permite especificar en campos de tipo file o email. Que se 
puedan introducir en el campo uno o más valores. 

Es un atributo booleano, por lo tanto la simple aparición del mismo en la 
etiqueta del campo, activa la opción. 

La sintaxis para el atributo es la siguiente. 

<input type-'email | file" multiple> 

El siguiente ejercicio muestra el uso del atributo en un formulario. 

<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author 1 ' content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envio.php" method="get" id="formulario1 "> 

Nombre: <¡nputtype="text" name-'nombre" placeholder="Teclee nombre completo" 
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maxlength="60" size="80"><br> 

Edad: <input type="number" name="edad" min="18" max="78" step="1" id="edad" 
><br> 

Email: <¡nputtype="email" name-'correo" placeholder-'Teclee las direcciones de 
email" size="90" múltiple ><br> 

<inputtype="submit" ñame-'enviar" value="enviar datos"> 

</form> 

</body> 

</html> 

El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 


Ejercicios prácticos HTML X 



list 


El atributo permite especificar una lista de datos, la cual será asociada al 
campo de forma que cuando se introduzca el valor del mismo se pueda seleccionar 
uno de los datos especificados en la lista simplemente seleccionándolo. 

Para que funcione correctamente el atributo trabaja en asociación con la 
etiqueta <datalist >, la cual permite especificar los datos que han de aparecen en 
la lista. Para especificar los datos de la lista en el interior de la etiqueta se ha de 
utilizar otra etiqueta denominada <option >. 

La sintaxis de la etiqueta <datalist >, es la siguiente. 

<datalist id="ldentificador de la lista" > 

<option valué-'Opción de la lista"> 

<option value-'Opción de la lista"> 

</datalist> 
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La etiqueta <option>, tiene varios atributos asociados, como son: 
disabled, que específica que el valor esta desactivado. El atributo label que permite 
especificar un texto corto para la opción. El atributo selected, el cual predetermina 
el elemento seleccionado de la lista y el atributo valué, el cual permite indicar el 
valor que será enviado al servidor como dato. 

La sintaxis del atributo option es la siguiente. 

<option label-'TextoCorto" disabled selected vaIue="VaIorServidor">Texto visualizado al 
desplegarse la lista</option> 

La sintaxis del atributo list es la siguiente. 

<¡nputtype-'valor" list-'Nombre Identificador de la lista" > 

El siguiente ejemplo muestra el uso del atributo en un formulario. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-’utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envio.php" method="get" id="formulario1 "> 

Nombre: <¡nputtype="text" name-'nombre" placeholder="Teclee nombre completo" 
maxlength="60" size="80"><br> 

Vehículo Marca: <input type="text" ñame-'marca" list="marcas" ><br> 
<datalistid="marcas"> 

<option label="Volvo">Volvo (Latin for "I roll")</option> 

<option label="Saab">Saab (Swedish Aeroplane AB)</option> 

<option label="Mercedes">Mercedes (Mercedes-Benz)</option> 

<option label="Audi">Audi (Auto Union Deutschland lngolstadt)</option> 

</datalist> 
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<¡nputtype="submit" name-'enviar" value-'enviar datos"> 

</form> 

</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 


_ □ 


B Ejercicios prácticos HTML x 


<- -> C D localhost/ejercicioshtml5/clase.html 

Aplicaciones Q aprendoencasa.com C3 Nueva carpeta 


☆ > = 

n Otros marcadores 


Nombre: Teclee nombre completo 

Vehículo Marca: 



enviar datos 

Volvo (Latín for ”1 roll") Vo)vo 


Saab (Swedish Aeroplane AB) 


Mercedes (Mercedes-Benz) Mercedes 

Audi (Auto Union Deutschland Ingolstadt) Aud 



pattem 

El atributo permite especificar un “patrón” de entrada de datos en el campo 
sobre el que se aplica, de forma que si el valor introducido no cumple el patrón 
especificado, el campo no será validado por el formulario. 

El atributo trabajo con los campos de tipo text, search, tel, email y 
password. Como recomendación se indica que se utilice el atributo global title, para 
mostrar ayuda sobre el patrón de forma que el usuario sepa como introducir el 
mismo. 


Un patrón es una cadena de texto, compuesta por símbolos o caracteres, los 
cuales significan algo según sean compuestos. Los patrones que se utilizan son los 
denominados “Patrones JavaScript”, los cuales se puede consultar su codificación en 
el siguiente enlace. 

http://www.javascriptkit.com/iavatutors/redev2.shtml 

Aunque para la utilización dentro de los elementos de E1TML5, es casi 
preferible consultar la siguiente dirección, la cual propone los patrones según su 
utilización. 

http ://html5pattern. com/ 

La sintaxis del atributo es la siguiente. 

<¡nputtype="valor" pattern="CadenaPatron"> 
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El siguiente ejemplo muestra el uso del atributo en un formulario. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envio.php" method="get" id="formulario1 "> 

Nombre: <input type="text" name-'nombre" placeholder="Teclee nombre completo" 
maxlength="60" size="80"><br> 

Fecha: <¡nput type="text" name="fecha1" pattern-'(0[1 -9] 1 1 [0-9] 1 2[0-9] 1 3[01]).(0[1- 
9] 11[012]).[0-9]{4} 

" title-'DD.MM.AAAA" ><br> 

DNI: <input type="text" name="dni" pattern="[0-9]{8}-[a-zA-Z]{1}" title="XXXXXXXX- 
A"><br> 

<input type="submit" ñame-'enviar" valué-'enviar datos"> 

</form> 

</body> 

</html> 


El resultado del ejemplo anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 



& Ejercicios prácticos HTML X 
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type 

El atributo permite especificar el tipo de campo que se quiere solicitar. El 
tipo por defecto que se aplica en caso de no aparecer el atributo es text, aunque se 
recomienda que el atributo siempre se especifique. 

La sintaxis del atributo es la siguiente. 

<input type-Tipo de Campo"> 


Los posibles valores del atributo son los siguientes. 


Valor del atributo 

Descripción 

button 

Define un botón sobre el que se puede realizar clic. Es 
frecuentemente usado para activar scripts. 

checkbox 

Define una casilla de verificación. 

color 

Define un campo de tipo selector de colores. 

date 

Define un campo de tipo fecha en formato año, mes, dia. No 
se ha de especificar hora. 

datetime 

Define un campo de tipo fecha y hora en formato año, mes, 
dia, hora, minuto, segundo y fracción de segundo, basado en 
zona horaria. 

datetime-local 

Define un campo de tipo fecha y hora en formato año, mes, 
dia, hora, minuto, segundo y fracción de segundo, sin base de 
zona horaria. 

email 

Define un campo de tipo correo electrónico. 

file 

Define un campo de tipo selector de ficheros, el cual visualiza 
un botón y presenta un cuadro de dialogo, donde se puede 
seleccionar el/los ficheros a seleccionar. 

hidden 

Define un campo de tipo oculto, normalmente son utilizados 
por los desarrolladores para el envió de información al 
servidor. 

image 

Define un campo de tipo botón de envió representado 
mediante una imagen especificada. 

month 

Define un campo de tipo control de mes y año, presentando 
un selector de fecha. 

number 

Define un campo de tipo numérico entero. 

password 

Define un campo de tipo contraseña, este tipo de campo 
visualiza normalmente asteriscos en vez de mostrar el 
contenido que se teclea. 
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radio 

Define un botón de radio, para selección única, es decir 
seleccionar una opción entre varias posibles. 

range 

Define un campo de tipo deslizador, en el cual arrastrando el 
mismo se selecciona un rango de valor numérico. 

reset 

Define un campo de tipo botón de limpieza, el cual borra el 
contenido de los campos del formulario. 

search 

Define un campo de tipo búsqueda, para teclear una cadena 
de búsqueda, no realiza búsquedas en el sitio. 

submit 

Define un campo de tipo botón de envió, al pulsarlo se realiza 
el envió del formulario. 

tel 

Define un campo de tipo introducción de telefono. 

text 

Define un campo de tipo texto, el ancho por defecto del 
campo es de 20 caracteres. 

time 

Define un campo para la introducción de horas. 

url 

Define un campo para la introducción de direcciones web 
(url’s). 

week 

Define un campo para la introducción de semana y mes. 


El siguiente ejemplo muestra el uso del atributo con un campo de tipo 

button. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<script> 

function mensajeO { 
alertC'Hola Mundo, Aqui Estoy..."); 

} 

</script> 
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<form action-'envio.php" method-'get" id="formulario1 "> 

Nombre: <¡nputtype="text" name-'nombre" placeholder="Teclee nombre completo" 
maxlength="60" size="80"><br> 

<inputtype="button" valué-'Haz Clic" onclick="mensaje()"> 

</form> 

</body> 

</html> 


El ejemplo anterior ha de mostrar un resultado similar al siguiente. 

m Ejercicios prácticos HTML x 


4- -> C Q localhost/ejerc¡c¡oshtml5/clase.html 

Aplicaciones Q] aprendoencasa.com C] Nueva carpeta 


Nombre: 
Haz Clic 


Mensaje de la página localhost: 

Hola Mundo, Aqui Estoy... 


_ n 


☆ ¥ = 

f~l Otros marcadores 


Aceptar 


El siguiente ejemplo muestra el uso del atributo con un campo de tipo 
checkbox. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author" content="José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="post" id="formulario1"> 

Nombre: <input type="text" name-'nombre" placeholder-'Teclee nombre completo" 
maxlength-'60" size="80"><br> 
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Vehículos disponibles:<br> 

<input type-'checkbox" name-'vehiculo" valué-'Bicicleta "> Bicicleta <br> 
<input type-'checkbox" name="vehiculo" valué-'Coche"> Coche<bp 
<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 

El ejercicio anterior ha de mostrar un resultado similar al siguiente. 


& Ejercicios prácticos HTML x 



El siguiente ejemplo muestra el uso del atributo con un campo de tipo 

color. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name="generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envio.php" method-'post" id="formulario1 "> 

Nombre: <¡nputtype="text" name="nombre" placeholder="Teclee nombre completo" 
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maxlength-'60" size="80"><br> 

Seleccione su color favorito: <input type="color" name="colorfavorito"><br> 
<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 

El resultado ha de ser similar al que se muestra en la imagen siguiente. 


_ n 


[*] Ejercicios prácticos HTML x 

C D localhost/ejercici 

i;; Aplicaciones CU aprendoencasa.com 


Nombre: 


:lee nombre cor 


pleto 


Seleccione su color favorito: 


Color 


Colores básicos: 

mrrrr 

umumr 


m m r 


Colores personalizados: 


■inir colores personalizados : 



ColorlSóljdo Qj m 


Aceptar 

Cancelar 


Agregar a los colores personalizados 


El siguiente ejemplo muestra el uso del atributo en un formulario con un 
campo de tipo date. 

<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name-'description" content="Ejerclcios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method-'post" id="formulario1"> 

Nombre: <inputtype="text" name="nombre" placeholder-'Teclee nombre completo" 
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maxlength="60" size="80"><br> 

Seleccione Fecha Nacimiento: <inputtype="date" name="bday"> 
<input type="submit" name="enviar" value="enviar"> 

</form> 

</body> 

</html> 



El resultado del ejercicio anterior ha de similar al que se muestra en 
la imagen siguiente. 



El siguiente ejemplo muestra el uso del atributo en un formulario con un 
campo de tipo datetime ydatetime-local. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name="generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form adion-'envió.php" method="post" id="formulario1 "> 
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Nombre: <¡nputtype="text" name-'nombre" placeholder="Teclee nombre completo" 
maxlength-'60" size="80"><br> 

Seleccione Fecha Nacimiento: <¡nputtype="datetime" name-'fechanacimiento"><br> 
Seleccione Fecha de Inicio: <inputtype="datetime-local" name="fechainicio"><br> 
<inputtype="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 

El resultado del ejercicio anterior ha de ser similar a la imagen siguiente. 



□ Ejercicios prácticos HTML x 



El siguiente ejemplo muestra el uso del atributo en un formulario con un 
campo de tipo email. 

<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name="generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 
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<body> 

<form action-'envio.php" method-'post" id="formulario1 "> 

Nombre: <¡nput type="text" name="nombre" placeholder="Teclee nombre completo" 
maxlength="60" size="80"><br> 

Correo: <¡nputtype="email" name-'correo" title="xxx@xxxx.xx" 
placeholder="xxxx@xxx.xx"><br> 

<input type="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 

El ejercicio anterior ha de mostrar un resultado similar al de la imagen 

siguiente. 



El siguiente ejemplo muestra el uso del atributo en un formulario con un 
campo de tipo file. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name="generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 
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<form action-'envio.php" method-'post" id="formulario1"> 

Nombre: <¡nputtype="text" name-'nombre" placeholder="Teclee nombre completo" 
maxlength="60" size="80"><br> 

Selecc. Archivo de fotografía: <inputtype="file" ñame-'imagen" ><br> 

<inputtype="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 

El ejercicio ha de mostrar un resultado similar al de la imagen siguiente. 



El siguiente ejemplo muestra el uso del atributo en un formulario con un 
campo de tipo hidden. 

<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="post" id="formulario1"> 

Nombre: <¡nputtype="text" name="nombre" placeholder-'Teclee nombre completo" 
maxlength="60" size="80"><br> 

Dirección: <inputtype="text" ñame-'dirección" placeholder-'Calle,No." ><br> 
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<¡nputtype="hidden" ñame-'localidad" value-'Elx" > 

<input type-’hidden" ñame-'direccionweb" value="www.aprendoencasa.com"> 
<inputtype="submit" ñame-'enviar" valué-'enviar"> 

</form> 

</body> 

</html> 

El ejercicio anterior ha de mostrar un resultado similar al de la imagen 

siguiente. 



El siguiente ejemplo muestra el uso del atributo en un formulario con un 
campo de tipo image. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="author" contení-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name="generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envio.php" method="post" id="formulario1"> 

Nombre: <¡nputtype="text" name="nombre" placeholder="Teclee nombre completo" 
maxlength="60" size="80"><br> 

Dirección: <inputtype="text" name-'direccion" placeholder="Calle,No." ><br> 

<input type-'image" src="enviar.png" alt="Enviar datos" > 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 























HTML5 


Curso de introducción al diseño Web 


234 www.aprendoencasa.com 

</form> 

</body> 

</html> 

El ejemplo anterior ha de mostrar un resultado similar al de la imagen 

siguiente. 



El siguiente ejemplo muestra el uso del atributo en un formulario con un campo de 
tipo month y week. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="author" contení-José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="post" ¡d="formulario1"> 

Nombre: <¡nputtype="text" name="nombre" placeholder="Teclee nombre completo" 
maxlength="60" size="80"><br> 

Dirección: <inputtype="text" ñame-'dirección" placeholder="Calle,No." ><bp 
Mes de inicio: <input type="month" name="mes"> <br> 

Semana de inicio: <inputtype="week" name="semana"> <br> 

<input type="submit" ñame-'enviar" value="Envió de información" > 

</form> 
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</body> 

</html> 


El ejemplo anterior ha de mostrar un resultado similar a la imagen siguiente. 


Ejercicios prácticos HTML x 


^ ^ G D localhost/ejerc¡c¡oshtml5/clase.html 

Aplicaciones Q aprendoencasa.com Q Nueva carpeta 


☆ V = 

r~l Otros marcadores 



Semana de inicio: 


Semanal 


Envió de informac 

noviembre de 2013 » 

4 

9 


Semana 

lu. 

ma. 

mi. 

ju. 

vi. 

sá. 

do. 

44 





1 

2 

3 

45 
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8 

9 

10 

46 

11 

12 

13 

14 

15 

16 

17 

47 

18 

19 

20 

21 

22 

23 

24 

48 

25 

26 

27 

28 

29 

30 



El siguiente ejemplo muestra el uso del atributo type, en un formulario con un 
campo de tipo number. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta ñame-'author 1 ' content="José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name="generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envio.php" method="post" id="formulario1 "> 

Nombre: <input type="text" name="nombre" placeholder-'Teclee nombre completo" 
maxlength="60" size="80"><br> 

Dirección: <inputtype="text" ñame-'dirección" placeholder-'Calle,No." ><br> 
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Articulo: <inputtype="text" ñame-'articulo 1 ' ><br> 

Cantidad (entre 2 y 12. pares): <¡nputtype="number" name="cantidad" min="2" 

max-'12'' step="2" value="2"><bp 

<input type="submit" ñame-'enviar" valué-'Envió de información" > 

</form> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al de la imagen siguiente. 


_ □ 


b Ejercicios prácticos HTML X 


<- -> C D localhost/ejercicioshtml5/clase.html 

i;; Aplicaciones aprendoencasa.com Q Nueva carpeta 


_ ☆ ¥ = 

r~l Otros marcadores 



Envió de información 


El siguiente ejemplo muestra el uso del atributo type, en un formulario con 
un campo de tipo password. 

<!DOCTYPEHTML> 

<html> 

<head> 

<tltle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name="generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method-'post" id="formulario1 "> 

Usuario: <inputtype="text" ñame- , usuario"><br> 

Contraseña: <¡nput type="password" name="contra"> <br/> 

<input type="submit" ñame-'enviar 1 ' valué-'enviar"> 
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</form> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al de la imagen 

siguiente. 



□ | 

[5] Ejercicios prácticos HTML X 


f ^ C l! localhost/ejercicioshtml5/clase.html 

III 

I:- Aplicaciones Q aprendoencasa.com Cü Nueva carpeta 

P~1 Otros marcadores 

Usuario: Anonimous 

Contraseña: .| 


enviar 



El siguiente ejercicio muestra el uso del atributo type, en un formulario con 
un campo de tipo radio, y otro de tipo reset. 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="author" content-'José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="post" id="formulario1 "> 

Usuario: <inputtype="text" name="usuario"><br> 

Contraseña: <input type="password" name="contra"><br/> 

Sexo: <input type="radio" name-'genero" value="Masculino"> Masculino 
<input type="radio" name-'genero" valué-'Femenino">Femenino <br/> 
<input type="submit" ñame-'enviar" value="enviar"> 

<input type-'reset" name-'limpiar" value="limpiar formulario"> 

</form> 
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</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al de la imagen 

siguiente. 



□ | 

[h] Ejercicios prácticos HTMl X 


C D localhost/ejercic¡oshtml5/clase.html 

& 

III 

Aplicaciones Q aprendoencasa.com Q Nueva carpeta 

P~l Otros marcadores 

Usuario: 

Contraseña: 

Sexo: 0 Masculino ÍS> Femenino 
enviar limpiar formulario 



El siguiente ejercicio muestra el uso del atributo type, en un formulario con 
un campo de tipo range. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" content="José Sáez"> 

<meta name="description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content-Vww.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="post" id="formulario1"> 

Nombre: <¡nputtype="text" name="nombre"><br> 

Apellidos: <inputtype="text" ñame-'apellidos"> <br/> 

Valoración: <¡nputtype="range" min="1" max="10" step="1" name="valoracion" 
value="5"><br> 

<inputtype="submit" ñame-'enviar" valué-'enviar"> 

<inputtype="reset" name-'limpiar"value="limpiarformulario"> 

</form> 
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</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la 
imagen siguiente. 



El siguiente ejemplo muestra el uso del atributo type, en un formulario con un 
campo de tipo search. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name="generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action-'envió.php" method="post" id="formulario1 "> 

Nombre: <inputtype="text" name="nombre"><br> 

Apellidos: <input type="text" name="apellidos"> <br/> 

Búsqueda: <¡nput type- 1 'search" ñame-'buscar" placeholder-'Teclee su 
búsqueda"><br> 

<input type="submit" ñame-'enviar" valué-'enviar"> 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 























240 www.aprendoencasa.com 



Curso de introducción al diseño Web 


<input type-'reset" name-'limpiar" valué-'limpiar formulario"> 

</form> 

</body> 

</html> 


El ejemplo anterior ha de mostrar un resultado similar al de la imagen 

siguiente. 



El siguiente ejercicio muestra el uso del atributo type, en un formulario con 
dos campos de tipos text y time. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name="author" contení-'José Sáez"> 

<meta name="description" contenl="Ejercicios prácticos HTML5"> 

<meta name="generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios ( Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="get" id="formulario1 "> 

Nombre: <¡nputtype="text" name="nombre"><br> 

Apellidos: <input type-'text" ñame-'apellidos"> <br/> 

Hora de entrada: <input type-'time" ñame-'hora"> <br> 

<inputtype="submit" ñame-'enviar" valué-'enviar"> 

<input type="reset" name-'limpiar" value-'limpiar formulario"> 
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</form> 

</body> 

</html> 

El ejercicio anterior ha de mostrar un resultado similar al que se muestra en 
la imagen siguiente. 



El siguiente ejercicio muestra el uso del atributo type, en un formulario con un 
campo de tipo url. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name="author" content="José Sáez"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name="generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form action="envio.php" method="get" id="formulario1"> 

Nombre: <¡nput type="text" name="nombre"><br> 

Dirección Web: <input type="url" name="direccionweb" placeholder="URL" ><br> 
<input type="submit" ñame-'enviar" valué-'enviar"> 

<input type="reset" name="limpiar" value="limpiarformulario"> 

</form> 
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</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al de la imagen 

siguiente. 


X 


El Ejercicios prácticos HTML x 


C D localhost/ejerc¡c¡oshtml5/clase.html 

III 

■■■ Aplicaciones CU aprendoencasa.com Qj Nueva carpeta 

n Otros marcadores 

Nombre: 


Dirección Web: www.aprendoencasa.com 


enviar limpiar formulario 



Etiqueta <BUTTON> 


La etiqueta <button>, permite definir un botón sobre el cual se puede realizar 
pulsaciones de ratón. Si la etiqueta se utiliza dentro de un formulario se pueden utilizar 
prácticamente los mismos atributos que los explicados anteriormente para la etiqueta 
<input >, con el atributo type, con un valor de button. Aunque se recomienda que para 
incluir botones en el formulario se utilice la etiqueta <input>. 

Por otra parte la utilización fuera de un formulario de la etiqueta se suele realizar 
para asociar el botón a la ejecución de una función JavaScript. La diferencia con los 
botones de un formulario, es que con esta etiqueta se pueden utilizar en el contenido de la 
etiqueta texto o imágenes. 

Se recomienda que utilice el atributo type de la etiqueta para especificar el valor 
button, ya que dependiendo del navegador el tipo por defecto para la etiqueta se puede 
interpretar de diferente forma. 

La sintaxis de la etiqueta utilizada fuera de un formulario es la siguiente. 

<button type="button">Contenido del botón, Texto o imágenes</button> 

El siguiente ejemplo muestra el uso de la etiqueta en un documento web. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 
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<meta charset-'utf-8"> 

<meta name-'descriptlon" content="Ejercicios prácticos HTML5"> 

<meta name="generator" content- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<script> 

function BotonNormal() { 
alert("Se ha pulsado el botón normal."); 

} 

function BotonlmagenO { 
alert("Se ha pulsado el botón de imagen."); 

} 

</scrlpt> 

<h1>Util¡zación de botones</h1> 

<button type="button" onclick="BotonNormal()">Botón Normal</button><br> 
<button type="button" onclick="Botonlmagen()"><img src="images.jpg" width="32" 
height="32"></button><br> 

</body> 

</html> 

El ejemplo anterior ha de mostrar un resultado similar al de la imagen siguiente. 

_ □ 

B Ejercicios prácticos HTML x 
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Etiqueta <FIELDSET> 


La etiqueta <fieldset>, se utiliza como contenido dentro de formularios. Y su 
función es la de realizar grupos de campos dentro del formulario. Estos grupos de campos 
son representados mediante un marco con borde alrededor de los campos contenidos en 
el grupo. 

La sintaxis de la etiqueta es la siguiente. 

<fieldset disabled form-'valor" name="valor"> 

Campos que se quieren agrupar... 

</fieldset> 

Los atributos que se pueden aplicar a la etiqueta son los siguientes. 

disabled 

El atributo especifica que los campos incluidos en el contenido de la 
etiqueta, estén desactivados. 

Es un atributo booleano, por tanto su sola aparición en la etiqueta, realiza la 
activación del mismo. 

form 


El atributo permite especificar a qué formulario pertenece el campo que se 
está solicitando especificando el atributo identificador del formulario. Como valor 
se ha de especificar el valor del atributo id , asociado al formulario donde se 
encuentra incluido la etiqueta. 

ñame 


El atributo permite especificar el nombre que se quiere asignar al grupo de 
controles del formulario. El nombre puede ser utilizado posteriormente bien por 
lenguajes clientes, para interactuar con el formulario, bien con lenguajes de 
servidor para procesar los datos recibidos e incluso por hojas de estilos, para aplicar 
un formato concreto al formulario. 

La etiqueta suele ir acompañada de otra etiqueta denomina <legend>, la cual 
permite establecer el título del grupo de elementos en el contenido de la misma, y se suele 
utilizar justo detrás de la etiqueta de apertura del grupo. 

El siguiente ejemplo muestra el uso de la etiqueta en un formulario de 

datos. 
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<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset="utf-8"> 

<meta name-'description" content="Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form name="formulario_datos" id="formulario_datos" action="envio.php" 
method="post"> 

<fieldset form="formulario_datos" name="grupo_datos_personales"> 
<legend> Datos Personales </legend> 

Nombre: <input type="text" name-'nombre" value="" placeholder="Teclee 
nombre. ,."><br> 

Localidad: <¡nputtype="text" name-'telefono" valué-'" placeholder-'Teclee 
telefono. ,."><br> 

</fieldset> 

<input type="submit" ñame-'enviar" value-'Enviar Datos. .."> 

</form> 

</body> 

</html> 

El resultado ha de ser similar al que se muestra en la imagen siguiente. 
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Etiqueta <LABEL> 


La etiqueta < label >, permite definir una etiqueta o título para los campos de tipo 
input, el incluir un título en el formulario no realiza ninguna función especial sobre los 
campos del mismo, pero sí de cara al usuario representa una mejora en la presentación del 
formulario, ya que también al incluir los títulos de los campos, el usuario puede realizar un 
clic sobre los mismos, permitiendo activar o recibir el foco del control asociado al título. 

La sintaxis de la etiqueta es la siguiente. 


<label for="ldentificador_Campo" form-'Nombre_formulario"> 
Titulo del campo... 

</label> 


Los atributos que utiliza la etiqueta son los siguientes. 

form 


El atributo permite especificar a qué formulario pertenece el campo que se 
está solicitando especificando el atributo identificador del formulario. Como valor 
se ha de especificar el valor del atributo id , asociado al formulario donde se 
encuentra incluido la etiqueta. 

for 


El atributo permite especificar el nombre del control, con el cual se ha de 
asociar la etiqueta. El nombre que se ha de indicar es el utilizado en el atributo id 
del control. 

El siguiente ejercicio muestra el uso de la etiqueta en un formulario de 

datos. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 
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<meta ñame-’author" contení-'José Sáez"> 

<meta name="description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form name="formulario_datos" id="formulario_datos"action-'envio.php" 
method="post" > 

<fieldsetform="formulario_datos" name="grupo_datos_personales"> 

<legend> Datos Personales </legend> 

<label for-'nombre" form="formulario_datos">Nombre: </label> 

<input type="text" name-'nombre" id="nombre" value="" placeholder="Teclee 
nombre. ,."><br> 

<label for-'localidad" form="formulario_datos">Localidad: </label> 

<input type="text" ñame-'telefono" id-'localidad"valué-'" placeholder-'Teclee 
telefono. ,."><br> 

</fieldset> 

<¡nput type="submit" ñame-'enviar" value="Enviar Datos. .."> 

</form> 

</body> 

</html> 


El resultado del ejercicio anterior ha de mostrar un resultado similar al de la 
imagen siguiente. 
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Etiqueta <KEYGEN> 


La etiqueta <keygen>, permite crear claves codificadas, de forma que sean 
enviadas junto con los datos del formulario, para añadir un nivel más de seguridad en el 
envío y recepción de los mismos. 

Cuando el formulario es enviado la clave privada es almacenada en el ordenador 
cliente, mientras que la clave pública, es enviada al servidor. 

La sintaxis de la etiqueta es la siguiente. 

<keygen autofocus challenge disabled form-'valor" keytype-'valor" name="valor"> 

La etiqueta es una de las que no tienen etiqueta de cierre. Entre los atributos de la 
misma se encuentran los siguientes. 

autofocus 

El atributo permite especificar cuál es el control que recibe el “foco”, 
cuando se realiza la carga del documento web en el navegador. Es un atributo 
booleano y solo con aparecer significa que está activado. 

disabled 

El atributo especifica que el elemento sobre el que se aplica, se ha de 
desactivar. Un elemento desactivado está bloqueado y no se puede cambiar ni 
realizar clic sobre el mismo. 

form 


El atributo permite especificar a qué formulario pertenece el campo que se 
está solicitando especificando el atributo identificador del formulario. Como valor 
se ha de especificar el valor del atributo id , asociado al formulario donde se 
encuentra incluido la etiqueta. 

ñame 


El atributo permite especificar el nombre que se quiere asignar al campo del 
formulario. El nombre puede ser utilizado posteriormente bien por lenguajes 
clientes, para interactuar con el formulario, bien con lenguajes de servidor para 
procesar los datos recibidos. 
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challenge 

El atributo permite especificar que las claves generadas sean cambiadas 
automáticamente, después de haberse producido el envió de los datos. 



keytype 

El atributo permite especificar el tipo de codificación que se quiere utilizar 
para el cifrado de las claves. Se pueden seleccionar tres tipos de codificación: rsa, 
dsa y ec. Siendo la utilizada por defecto el primer tipo de codificación. 


El siguiente ejemplo muestra el uso de la etiqueta en un formulario de datos. 

<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" content-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form name="formulario_datos" id="formulario_datos" action="envio.php" 
method="post" > 

<fieldsetform="formulario_datos" name="grupo_datos_personales"> 

<legend> Datos Personales </legend> 

<label for="nombre" form="formulario_datos">Nombre: </label> 

<input type="text" name-'nombre" id="nombre" valué-"' placeholder-'Teclee 
nombre. ,."><br> 

<label for-'localidad" form="formulario_datos">Localidad: </label> 

<input type="text" name-'telefono" id-'localidad" valué-'" placeholder-'Teclee 
telefono. ,."><br> 

<label for-'codificación" form="formulario_datos">Encriptado:</label> 

<keygen ñame-'codificación" id="codificacion" keytype="rsa" > 
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</fieldset> 

<¡nput type="subm¡t" name-'enviar" value="Enviar Datos. .."> 

</form> 

</body> 

</html> 

El ejemplo anterior ha de mostrar un resultado similar al de la imagen siguiente. 



Etiqueta < METER > 


La etiqueta <meter>, permite definir un control que representa una medida 
escalar dentro de un rango conocido. Se suele utilizar para expresar uso de discos, 
importancia de un resultado, etc. 

No se recomienda su utilización para expresar un indicador o barra de progreso, 
utilizándose para esa tarea la etiqueta progress. 

Aunque se puede especificar un contenido de texto en la etiqueta, este por lo que 
se ha observado no se tiene efecto visual en la representación en el navegador. 

La sintaxis de la etiqueta es la siguiente. 

<meter form-'valor" high-'valor" low-'valor" max-'valor" min-'valor" 

optimum-'valor" valué-'valor" > 

Contenido de la etiqueta... 

</meter> 

Los atributos de la etiqueta son los siguientes. 
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form 


El atributo permite especificar a qué formulario pertenece el campo que se 
está solicitando especificando el atributo identificador del formulario. Como valor 
se ha de especificar el valor del atributo id, asociado al formulario donde se 
encuentra incluido la etiqueta. 

valué 


El atributo permite especificar el valor de la barra indicadora, 

low, high, optimum 

Los atributos permiten especificar los valores numéricos a partir de los 
cuales se considera que son valores bajos y altos respectivamente. Así como el valor 
considerado como optimo dentro del rango. Al indicar como valor de la barra 
indicadora un valor comprendido entre los rangos de alto y bajo, se cambia el color 
de visualización de la misma. 

min, max 

Los atributos permiten especificar los valores numéricos considerados 
mínimo y máximo respectivamente de la barra indicadora. 


El siguiente ejemplo muestra el uso de la barra indicadora en un formulario de 
datos. Aunque se ha de tener en cuenta que este control no envía ningún tipo de dato al 
servidor. 


<!DOCTYPEHTML> 

<html> 

<head> 

<title>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 
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</head> 

<body> 

<form ñame-'formulario_datos" id="formulario_datos" action="envio.php" 
method="get"> 

<fieldset form="formulario_datos" name="grupo_datos_personales"> 

<legend> Datos Personales </legend> 

<label for-'nombre" form="formulario_datos">Nombre: </label> 

<input type="text" name-'nombre" id="nombre" value="" placeholder="Teclee 
nombre. ,."><br> 

<label for-'localidad" form="formulario_datos">Localidad: </label> 

<input type="text" ñame-'telefono" ¡d-'localidad" valué-'" placeholder-'Teclee 
telefono. ,."><br> 

<label for-'codificación" form-'formulario_datos">Encriptado:</label> 

</f¡eldset> 

<meterform="formulario_datos" name-'valor" id="valor" value="7" min-'O" 
max="10" low="4" high="8" optimum="6">2 sobre 10</meter><br> 
<¡nputtype="submit" ñame-'enviar" valué-'Enviar Datos..."> 

</form> 

</body> 

</html> 


El resultado del ejercicio anterior ha de similar al de la imagen siguiente. 
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Etiqueta <PROGRESS> 



La etiqueta <progress>, permite especificar una barra indicadora, que sirve para 
representar el progreso de una tarea que está realizando. Se suele utilizar en conjunto con 
lenguajes de programación de cliente para mostrar el progreso de la tarea visualmente. 

La sintaxis de la etiqueta es la siguiente. 

<progress max="valor" value="valor"></progress> 

Entre sus atributos encontramos max, el cual permite especificar un valor 
numérico el cual representaría, el 100% de la tarea que se está evaluando, y valué, que 
representa el valor numérico, realizado por el momento de la tarea. 

El siguiente ejemplo muestra el uso de la etiqueta en un formulario de datos. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form name="formulario_datos" id="formulario_datos" action="envio.php" 
method="get" > 

<fieldsetform="formulario_datos" name="grupo_datos_personales"> 

<legend> Datos Personales </legend> 

<label for-'nombre" form="formulario_datos">Nombre: </label> 
<¡nputtype="text" name="nombre" id="nombre" valué-'" placeholder="Teclee 
nombre. ,."><br> 

<label for-'localidad" form="formulario_datos">Localidad: </label> 
<¡nputtype="text" ñame-'telefono" id="localidad" valué-'" placeholder-'Teclee 
telefono. ,."><br> 
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</fieldset> 

<¡nputtype="submlt" name-'enviar" value-'Enviar Datos.. ."> 

</form> 

<p>Progreso realizado... </p> 

<progress max="100" valué-'90"></progress> 

</body> 

</html> 


El ejemplo anterior ha de mostrar un resultado similar al de la imagen siguiente. 



B Ejercicios prácticos HTMl X 



Etiqueta <OUTPUT> 

La etiqueta <output>, permite definir el resultado de un cálculo, utilizando los 
lenguajes de cliente, su contenido para mostrar el resultado de la operación realizada. 

La sintaxis de la etiqueta es la siguiente. 

<outputfor="valor" form="valor" name="valor"></output> 

Los atributos que utiliza la etiqueta son los siguientes: 

for 


El atributo permite especificar el o los nombres de los controles, con los 
que se asocia la etiqueta. El nombre que se ha de indicar es el utilizado en el 
atributo id del control o controles que se quieren asociar, separados por espacios 
en blanco. 
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form 


El atributo permite especificar a qué formulario pertenece el campo que se 
está solicitando especificando el atributo identificador del formulario. Como valor 
se ha de especificar el valor del atributo id, asociado al formulario donde se 
encuentra incluido la etiqueta. 

ñame 


El atributo permite especificar el nombre que se quiere asignar al campo del 
formulario. El nombre puede ser utilizado posteriormente bien por lenguajes 
clientes, para interactuar con el formulario, bien con lenguajes de servidor para 
procesar los datos recibidos. 

El siguiente ejemplo muestra el uso de la etiqueta para calcular un resultado con 
dos barras de rango. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta name-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta name-'keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form name="formulario_datos" id="formulario_datos" action="envio.php" 
method="get"> 

<fieldsetform-'formulario_datos" name="grupo_datos_personales" 
oninput="resultado.value=parselnt(numeroa.value)+parselnt(numerob.value)"> 
<legend> Datos Personales </legend> 

<label for-'nombre" form="formulario_datos">Nombre: </label> 

<¡nput type="text" name="nombre" id="nombre" valué-'" placeholder-'Teclee 
nombre. ,."><br> 

<label for-'localidad" form="formulario_datos">Localidad: </label> 

<input type="text" ñame-'telefono" id-'localidad"valué-'" placeholder-'Teclee 
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telefono. ,."><br> 

O <input type-'range" id-'numeroa" valué-'50"> 100+0 <¡nput type-'range" 
id="numerob" valué-'50"> 100 = <output name="resultado" for="numeroa 
numerob"x/output> 

</fieldset> 

<input type="submit" name-'enviar" valué-'Enviar Datos..."> 

</form> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al de la imagen siguiente. 



Etiqueta <SELECT> 

La etiqueta <select>, permite la creación de listas desplegables o listas abiertas, 
desde la que poder realizar la selección de una o varias de las opciones que se presentan 
en la misma. 

La sintaxis de la etiqueta es la siguiente. 

<select autofocus disabled form-'valor" múltiple name-'valor" required slze="valor"> 
<option disabled label-'valor" selected valué-'val o r"> 

Contenido de la opción 
</option> 

<option disabled label-'valor"selected value="valor"> 

Contenido de la opción 
</option> 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 



























Curso de introducción al diseño Web - www.aprendoencasa.com 


257 



</select> 


La etiqueta se configura en conjunto con otra etiqueta denominada <option>, la 
cual permite especificar las opciones que aparecen en la lista. 

Entre los atributos de la etiqueta <select >, encontramos los siguientes. 

autofocus 


El atributo permite especificar cual es el control que recibe el “foco”, 
cuando se realiza la carga del documento web en el navegador. Es un atributo 
booleano y solo con aparecer significa que está activado. 

disabled 


El atributo especifica que el elemento sobre el que se aplica, se ha de 
desactivar. Un elemento desactivado está bloqueado y no se puede cambiar ni 
realizar clic sobre el mismo. 

form 


El atributo permite especificar a qué formulario pertenece el campo que se 
está solicitando especificando el atributo identificador del formulario. Como valor 
se ha de especificar el valor del atributo id , asociado al formulario donde se 
encuentra incluido la etiqueta. 

múltiple 

El atributo permite especificar en campos de tipo select. Que se puedan 
seleccionar una o más opciones de la lista que se presenta. 

ñame 


El atributo permite especificar el nombre que se quiere asignar al campo del 
formulario. 

required 

El atributo aplicado a un campo permite especificar que la introducción de 
datos en el campo ha de ser obligatorio, es decir no se puede dejar en blanco. 

size 


El atributo permite especificar un valor numérico, el cual corresponderá con 
las opciones visibles que se presentan de la lista en el campo. 
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Por otra parte la etiqueta para especificar las opciones <option>, dispone 
de los siguientes atributos: 

disabled 

El atributo especifica que el elemento sobre el que se aplica, se ha de 
desactivar. Un elemento desactivado está bloqueado y no se puede cambiar ni 
realizar clic sobre el mismo. 

label 


El atributo permite especificar una etiqueta corta en formato de texto, para 
la opción que se está especificando. 

selected 

El atributo permite especificar que la opción sobre la cual se aplica, es la 
opción preseleccionado cuando el documento es cargado en el navegador. 

valué 


El atributo especifica el valor que se quiere asignar a la opción que se 
presenta en la lista de forma que este valor es el enviado, cuando se pulsa el botón 
de envió del formulario. 

También es posible incluir las opciones como contenido de otra etiqueta 
denominada <optgroup>, la cual permite especificar grupos de opciones, agrupando las 
opciones comunes por grupos. Esta última etiqueta solo dispone de dos atributos: label, el 
cual permite especificar el valor del nombre del grupo y disabled , que permite especificar 
que el grupo este activado o desactivado. 

El siguiente ejemplo muestra el uso de varias listas desplegables en un formulario 
de datos. 

<!DOCTYPEHTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" content="www.aprendoencasa.com, Curso práctico 
HTML5"> 
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<meta ñame-’keywords" content="Ejercic¡os, Soluciones, Prácticas, HTML5"> 


</head> 

<body> 


<form name="formulario_datos" id-'formulario_datos" action="envio.php" 
method="get"> 

<fieldset form="formulario_datos" name="grupo_datos_personales"> 

<legend> Datos Personales </legend> 

<label for-'nombre" form="formulario_datos">Nombre: </label> 

<input type="text" name-'nombre" id="nombre" value="" placeholder="Teclee 
nombre. ,."><br> 

<label for-'localidad" form="formulario_datos">Localidad: </label> 
<¡nputtype="text" ñame-'telefono" id="localidad" valué-'" placeholder-'Teclee 
telefono. ,."><br> 

</fieldset> 

<fieldset form="formulario_datos" name="grupo_datos_comunes"> 

<legend> Otros datos... </legend> 

<label for="coche" form="formlario_datos">Vehiculo: </label> 

<select ñame-'coche" required size="4"> 

<option valué-'Ninguno" selected>Ninguno</opt¡on> 

<optgroup label="Coches Suizos"> 

<opt¡on value="volvo">Volvo</option> 

<option valué-'saab">Saab</opt¡on> 

</optgroup> 

<optgroup label-'Coches Alemanes"> 

<opt¡on value="mercedes">Mercedes</option> 

<option value="audi">Audi</opt¡on> 

</optgroup> 

</select> 

<br> 

<label for-'coche" form="formlario_datos">Estado Civil: </label> 

<select name="estado"> 

<opt¡on valué-'Ninguno" selected>Ninguno</option> 

<option value="casado">Casado</option> 

<option valué-'separado">Separado</opt¡on> 

<option value="divorciado">D¡vorclado</option> 
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<option value="viudo">Viudo</option> 

</select> 

</fieldset> 

<¡nputtype="submit" name="enviar" value="Enviar Datos.. ."> 

</form> 

</body> 

</html> 


El ejemplo anterior ha de mostrar un resultado similar al de la imagen siguiente. 



Etiqueta <TEXTAREA> 


La etiqueta <textarea> , permite definir un area de texto similar a un campo de 
texto, pero con la diferencia que se pueden indicar tanto el número de filas, como de 
columnas, con las que se quiere representar visualmente el control, no teniendo un límite 
definido para el numero de caracteres que se pueden teclear en el area de texto. 

Se suele utilizar para solicitar textos explicativos, opiniones, comentarios, etc. 
Normalmente el tipo de letra utilizado por el control es Courier, aunque mediante hojas 
de estilos es posible variar las opciones del control. 


La sintaxis de la etiqueta es la siguiente. 
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<textarea autofocus disabled form-'valor" cols-'valor" rows="valor" maxlength-'valor" 
name-'valor" placeholder-'valor" readonly required wrap="valor"> 

Contenido inicial del area de texto... 

</textarea> 


Los atributos de la etiqueta son los siguientes: 


autofocus 

El atributo permite especificar cuál es el control que recibe el “foco”, 
cuando se realiza la carga del documento web en el navegador. Es un atributo 
booleano y solo con aparecer significa que está activado. 

disabled 

El atributo especifica que el elemento sobre el que se aplica, se ha de 
desactivar. Un elemento desactivado está bloqueado y no se puede cambiar ni 
realizar clic sobre el mismo. 

required 

El atributo aplicado a un campo permite especificar que la introducción de 
datos en el campo ha de ser obligatorio, es decir no se puede dejar en blanco. 

readonly 

El atributo permite especificar que un campo sea de solo lectura, es decir su 
contenido será visible y podrá ser seleccionado, pero no se podrá modificar. Se 
suele utilizar en conjunto con lenguajes de programación de cliente, para alterar el 
valor de solo lectura, cuando se cumplan ciertas condiciones en los datos. 

ñame 


El atributo permite especificar el nombre que se quiere asignar al campo del 
formulario. 

form 


El atributo permite especificar a qué formulario pertenece el campo que se 
está solicitando especificando el atributo identificador del formulario. Como valor 
se ha de especificar el valor del atributo id, asociado al formulario donde se 
encuentra incluido la etiqueta. 


Introducción al diseño web 


José Sáez 


www.aprendoencasa.com 













262 www.aprendoencasa.com 


HTML! 


Curso de introducción al diseño Web 


maxlength 

El atributo permite especificar el número de caracteres máximos que se 
permite teclear en una etiqueta de tipo entrada. 

cois 


El atributo permite especificar el número de columnas visibles, que el 
control visualiza. 

rows 


El atributo permite especificar el número de filas visibles, que el control 
visualiza en su representación en el navegador. 

wrap 

El atributo permite especificar como se realiza el ajuste de palabras en el 
contenido del control, se puede seleccionar entre dos posibles valores hard y soft. 


El siguiente ejemplo muestra el uso del control en un formulario de datos. 


<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content-'Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<form name="formulario_datos" id="formulario_datos" action="envio.php" 
method="get" > 

<f¡eldsetform-'formulario_datos" name="grupo_datos_personales"> 
<legend> Datos Personales </legend> 
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<label for-'nombre" form="formulario_datos">Nombre: </label> 

<input type="text" name-'nombre" id="nombre" value="" placeholder="Teclee 
nombre. ,."><br> 

<label for="localidad" form="formulario_datos">Localidad: </label> 
<¡nputtype="text" ñame-'telefono" id-'localidad" valué-'" placeholder-'Teclee 
telefono. ,."><br> 

</fieldset> 

<br> Comentarios... <bp 

<textarea name="comentarios" rows="7" cols="70" placeholder="Teclee sus 
comentarios.. ,"></textarea> 

<¡nput type="submit" ñame-'enviar" value-'Enviar Datos..."> 

</form> 

</body> 

</html> 


El ejercicio anterior ha de mostrar un resultado similar al de la imagen siguiente. 
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Ejercicios 7 


I o Realizar los siguientes documentos web, que se muestran en las siguientes 
imágenes. Intentando que se asemeje lo más posible al resultado mostrado. 
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Ejemplo de etiqueta fieldset y legend - Opera ' — " n ' x 


Archivo Editar Ver Marcadores Widgets Herramientas Ayuda 

Formulario estructurado 

~~ Datos personales- 

Nombre 

1 , 1 

Apellidos 


DNI 


— Datos de conexión 
Nombre de usuario 


Contraseña 


Repite la contraseña 

I. 
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Etiqueta CIFRAME> 



La etiqueta <tírame>, permite realizar la inserción de un marco en línea, dentro 
del documento web. Un marco le va a permitir insertar contenido dentro de un 
documento como puede ser otro documento web, un mapa de google maps, etc. 

La sintaxis de la etiqueta es la siguiente. 

<iframe height-'valor" width-'valor" name-'valor" sandbox-'valor" seamless-'valor" 
src-'valor" srdoc-'valor" ></iframe> 

Los atributos que se pueden especificar son los siguientes: 

width 


El atributo width, permite especificar el ancho del marco en pixeles. 

height 

El atributo height, permite especificar el alto del marco en pixeles. 


ñame 


El atributo permite especificar el nombre que se quiere asignar al marco 
insertado en el documento web. 

src 


El atributo src, permite especificar el origen del objeto que se quiere 
insertar en el marco, es decir su ubicación, bien mediante una ruta absoluta o 
relativa. 

srdoc 


El atributo permite especificar el contenido del objeto en línea, es decir si se 
especifica contenido en este atributo y el navegador soporta el mismo, se 
sobrescribe el contenido del atributo src, presentándose el contenido especificado 
en este atributo. 

seamless 

El atributo permite especificar que el marco se presente sin barras de 
desplazamiento ni bordes, de esta forma su integración dentro del documento web, 
es más suave. Es un atributo booleano, para activarlo solo ha de estar presente en la 
etiqueta. 
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sandbox 

El atributo permite especificar ciertas restricciones para el contenido del 
marco, siempre y cuando se utilice el atributo. Si se especifica el atributo con un 
valor vacío (), se aplican todas las restricciones, en otro caso se han de especificar 
las restricciones separadas por espacios en blanco dentro de la cadena de texto que 
se utiliza como valor del atributo. 

Las restricciones que se pueden aplicar son las siguientes: 


Valor del atributo 

Descripción 

(O) 

Se aplican todas las restricciones. 

allow-same-origin 

El contenido del marco se trata de la misma forma que el 
documento web que lo contiene. 

allow-top-navigation 

Permite que el contenido del marco, pueda interactuar con el 
contenido del documento web que lo contiene en la 
“navegación” por el mismo. 

allow-forms 

Permite que el contenido del marco pueda realizar envió de 
datos de formularios. 

allow-scripts 

Permite que el contenido del marco pueda ejecutar scripts. 


El siguiente ejemplo muestra el uso de la etiqueta, visualizando un mapa de 

google. 

<!DOCTYPE HTML> 

<html> 

<head> 

<t¡tle>Ejercicios prácticos HTML5</title> 

<meta charset-'utf-8"> 

<meta ñame-'author" contení-'José Sáez"> 

<meta name-'description" content-'Ejercicios prácticos HTML5"> 

<meta name-'generator" contení- 'www.aprendoencasa.com, Curso práctico 
HTML5"> 

<meta ñame-’keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"> 

</head> 

<body> 

<h1>Mapa insertado de google</h1> 

<iframe width="425" height="350" frameborder="0" scrolling-'no" marginheight-'O" 
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marginwidth-'O" 

src="https://maps.google.es/maps?q=huerto+del+cura+elche+maps&amp;ie=UTF8&am 
p;hq=huerto+del+cura&amp;hnear=Elche ,+Alicante ,+Comunidad+Valenciana&amp;t=h& 
a m p;11=38.277641 

0.667054&amp;spn=0.032764,0.109217&amp;output=embed"></¡frame><br 

/><small><a 

href="https://maps.google.es/maps?q=huerto+del+cura+elche+maps&amp;ie=UTF8&a 
mp;hq=huerto+del+cura&amp;hnear=Elche,+Alicante,+Comunidad+Valenciana&amp;t=h 
&amp;ll=38.277641,-0.667054&amp;spn=0.032764,0.109217&amp;source=embed" 
style="color:#OOOOFF;text-align:left">Ver mapa más grande</a></smal!> 

</body> 

</html> 


El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen 
siguiente. 
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